@font-face{
    font-family:Gelion;
    src:url("./fonts/gelion-regular.ttf") format("truetype"),
        url("./fonts/gelion-regular.eot?") format("eot"),
        url("./fonts/gelion-regular.woff") format("woff");
    font-weight:400;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:Gelion;
    src:url("./fonts/gelion-bold.ttf") format("truetype"),
        url("./fonts/gelion-bold.eot?") format("eot"),
        url("./fonts/gelion-bold.woff") format("woff");
    font-weight:700;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:Gelion;
    src:url("./fonts/gelion-black.ttf") format("truetype"),
        url("./fonts/gelion-black.eot?") format("eot"),
        url("./fonts/gelion-black.woff") format("woff");
    font-weight:900;
    font-style:normal;
    font-display:swap
}

:root {
    /* COLORS */
    --cg-orange: #ff5c35;
    --cg-blue: #0046fe;
    --cg-dark: #002C52;
    --cg-grey: #f2f2f2;
    --cg-white: #fff;

    --cg-orange-hover: #f73000;

    --border-light: 1px solid #ddd;

    /* HEIGHT */
    --head-logo-w: 240px;
    --head-logo-h: 80px;

    --max-w: 1180px;
    --pad-max-w: calc((100vw - var(--max-w)) / 2);

    --card-w: 220px;
    --banner-sz: 220px;
}

h1, h2, h3, div, header, nav, section, p, ul, table, th, tr, tbody, td {
    padding: 0;
    margin: 0;
    border: none;
    list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

body {
    font-size: 16px;
    color: var(--cg-dark);
    padding: 0;
    margin: 0;
    text-align: left;
    width: auto;
    min-width: 300px;
}

body, input, select, textarea, button {
    font-family: Gelion, Arial, sans-serif;
}

a {
    color:var(--cg-blue);
}
a:not(.btn):hover {color:var(--cg-orange)}

:is(.foot, .bg-blue, .bg-dark) a:hover i:before {color: var(--cg-orange) !important}

:is(.hcontent, .fcontent) i {
    font-size: 2rem;
}
.hcontent i::before {color:var(--cg-dark)}
i::before {transition: all 0.5s ease}

input, select, textarea, button {
    font-size: inherit;
    color: inherit;
}

button, .btn{
    border-radius: 2rem;
    padding: .7rem 1.25rem;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;    
    font-weight: bold;
    display: inline-block;
    margin:auto;
    text-transform: uppercase;
    line-height: 1.5rem;
    transition: all 0.5s ease;
}
@media (hover: hover) {         /* Prevent sticky hover on touchscreen devices*/
    button:hover, .btn:hover {
        box-shadow: 0 0 12px 4px rgba(0,0,0,.2);
    }
}

h1 {
    font-size: 3rem;
    line-height: 3.75rem;
}
h2 {
    font-size: 2.25rem;
    line-height: 2.75rem;
}
h3 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}
h4 {
    font-size: 1.5rem;
    line-height: 2rem;
}
h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cg-blue);
    font-weight: bold;
}

form {
    padding: 2rem var(--pad-max-w);
    background-color: var(--cg-grey);
}

textarea {
    resize: none;
}
a:link {
    text-decoration: none;
}

ul > li {
    margin: 0;
}


/* MARGIN */
.m-0 { margin: 0 !important }
.m-1 { margin: 0.3em !important }
.m-2 { margin: 0.6em !important }
.m-3 { margin: 1em !important }
.m-4 { margin: 1.5em !important }
.m-5 { margin: 2.2em !important }
.m-6 { margin: 3em !important }

.my-0, .mt-0 { margin-top: 0 !important }
.my-1, .mt-1 { margin-top: 0.3em !important }
.my-2, .mt-2 { margin-top: 0.6em !important }
.my-3, .mt-3 { margin-top: 1em !important }
.my-4, .mt-4 { margin-top: 1.5em !important }
.my-5, .mt-5 { margin-top: 2.2em !important }
.my-6, .mt-6 { margin-top: 3em !important }

.my-0, .mb-0 { margin-bottom: 0 !important }
.my-1, .mb-1 { margin-bottom: 0.3em !important }
.my-2, .mb-2 { margin-bottom: 0.6em !important }
.my-3, .mb-3 { margin-bottom: 1em !important }
.my-4, .mb-4 { margin-bottom: 1.5em !important }
.my-5, .mb-5 { margin-bottom: 2.2em !important }
.my-6, .mb-6 { margin-bottom: 3em !important }

.mx-0, .ml-0 { margin-left: 0 !important }
.mx-1, .ml-1 { margin-left: 0.3em !important }
.mx-2, .ml-2 { margin-left: 0.6em !important }
.mx-3, .ml-3 { margin-left: 1em !important }
.mx-4, .ml-4 { margin-left: 1.5em !important }
.mx-5, .ml-5 { margin-left: 2.2em !important }
.mx-6, .ml-6 { margin-left: 3em !important }

.mx-0, .mr-0 { margin-right: 0 !important }
.mx-1, .mr-1 { margin-right: 0.3em !important }
.mx-2, .mr-2 { margin-right: 0.6em !important }
.mx-3, .mr-3 { margin-right: 1em !important }
.mx-4, .mr-4 { margin-right: 1.5em !important }
.mx-5, .mr-5 { margin-right: 2.2em !important }
.mx-6, .mr-6 { margin-right: 3em !important }
/********************/


/* PADDING */
.p-0 { padding: 0 !important }
.p-1 { padding: 0.3em !important }
.p-2 { padding: 0.6em !important }
.p-3 { padding: 1em !important }
.p-4 { padding: 1.5em !important }
.p-5 { padding: 2.2em !important }
.p-6 { padding: 3em !important }

.py-0, .pt-0 { padding-top: 0 !important }
.py-1, .pt-1 { padding-top: 0.3em !important }
.py-2, .pt-2 { padding-top: 0.6em !important }
.py-3, .pt-3 { padding-top: 1em !important }
.py-4, .pt-4 { padding-top: 1.5em !important }
.py-5, .pt-5 { padding-top: 2.2em !important }
.py-6, .pt-6 { padding-top: 3em !important }

.py-0, .pb-0 { padding-bottom: 0 !important }
.py-1, .pb-1 { padding-bottom: 0.3em !important }
.py-2, .pb-2 { padding-bottom: 0.6em !important }
.py-3, .pb-3 { padding-bottom: 1em !important }
.py-4, .pb-4 { padding-bottom: 1.5em !important }
.py-5, .pb-5 { padding-bottom: 2.2em !important }
.py-6, .pb-6 { padding-bottom: 3em !important }

.px-0, .pl-0 { padding-left: 0 !important }
.px-1, .pl-1 { padding-left: 0.3em !important }
.px-2, .pl-2 { padding-left: 0.6em !important }
.px-3, .pl-3 { padding-left: 1em !important }
.px-4, .pl-4 { padding-left: 1.5em !important }
.px-5, .pl-5 { padding-left: 2.2em !important }
.px-6, .pl-6 { padding-left: 3em !important }

.px-0, .pr-0 { padding-right: 0 !important }
.px-1, .pr-1 { padding-right: 0.3em !important }
.px-2, .pr-2 { padding-right: 0.6em !important }
.px-3, .pr-3 { padding-right: 1em !important }
.px-4, .pr-4 { padding-right: 1.5em !important }
.px-5, .pr-5 { padding-right: 2.2em !important }
.px-6, .pr-6 { padding-right: 3em !important }
/********************/


/* CEGID BUTTONS */
.btn-accent, .botonForm {
    background-color: var(--cg-orange);
    color: #fff;
    border: 1px solid var(--cg-orange);
}
.btn-secondary {
    background-color: var(--cg-dark);
    color: #fff;
    border: 1px solid var(--cg-dark);
}
.btn-outline-accent {
    border: 1px solid var(--cg-orange);
    color: var(--cg-orange);
    background: none;
}
.btn-outline-secondary {
    border: 1px solid var(--cg-dark);
    color: var(--cg-dark);
    background: none;
}

:is(.bg-blue, .bg-dark, .bg-orange ) :is(.btn-accent, .btn-secondary, .botonForm) {
    color: var(--cg-dark);
    background-color: var(--cg-white);
    border: 1px solid var(--cg-white);
}
:is(.bg-blue, .bg-dark, .bg-orange ) :is(.btn-outline-accent, .btn-outline-secondary) {
    color: var(--cg-white);
    background-color: transparent;
    border: 1px solid var(--cg-white);
}

@media (hover: hover) {         /* Prevent sticky hover on touchscreen devices*/
    :is(.bg-blue, .bg-dark, .bg-orange) :is(.btn-accent, .btn-secondary, .botonForm):hover {
        color: var(--cg-white);
        background-color: var(--cg-orange);
        border: 1px solid var(--cg-orange);
    }
    :is(.bg-blue, .bg-dark, .bg-orange) :is(.btn-outline-accent, .btn-outline-secondary):hover {
        color: var(--cg-orange);
        background-color: var(--cg-white);
        border: 1px solid var(--cg-white);
    }
}
/********************/

/* CEGID STYLE: DASH LINE & DOTS FOR ITEMS */
.dash-line {
    display: flex;
    align-items: center;
    margin: 0 1rem;
    border-left: .2rem dashed #0046fe66;
}
.dot {
    position: relative;
    left: -0.6rem;
    background: var(--cg-orange);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
/******************************/

/* CUSTOM */
.max-w {
    max-width: var(--max-w);
    margin: auto;
}

.w-100 {width: 100%}
.h-100 {height: 100%}

.flex {display: flex}
.flex-col {
    display: flex;
    flex-direction: column;
}
.f-wrap {flex-wrap: wrap;}
.f-just-cent {justify-content: center}
.f-align-cent {align-items: center}

.t-cent {text-align: center;}
.t-just {text-align: justify;}

.hover {
    cursor: pointer;
    box-shadow: 0 0 12px 4px rgba(0,0,0,.2);
}

.col-orange {color: var(--cg-orange)}
.col-blue {color: var(--cg-blue)}
.col-dark {color: var(--cg-dark)}
.col-white {color: var(--cg-white)}

.bg-orange {background-color: var(--cg-orange)}
.bg-blue {background-color: var(--cg-blue)}
.bg-dark {background-color: var(--cg-dark)}
.bg-grey {background-color: var(--cg-grey)}
.bg-white {background-color: var(--cg-white)}

.b-orange {border: 1px solid var(--cg-orange)}
.b-blue {border: 1px solid var(--cg-blue)}
.b-dark {border: 1px solid var(--cg-dark)}
.b-light {border: var(--border-light)}
.b-white {border: 1px solid var(--cg-white)}

.b-rad {border-radius: 1rem}
.b-rad-2 {border-radius: 2rem}

.cg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--border-light);
    border-radius: 2rem;
    background-color: var(--cg-white);
    box-shadow: 0 0 16px 0 rgba(204,204,204,.48);
    transition: all .35s ease;
}
.cg-card:hover {
    border-color: var(--cg-orange);
    transform: scale(1.01);
}
/********************/


.cookies {
    background: var(--cg-dark);
    display: none;
}

.ccontent{
    max-width: 1180px;
    height: auto;
    margin: auto;
    padding: 10px;
    background: transparent;
    line-height: 14px;
    color: var(--cg-white)
}

.ccontent h2,
.ccontent a {
    color: var(--cg-orange);
    font-size: 14px;
}

.ccontent button {
    color: var(--cg-white);
    background: var(--cg-orange);
    border: 1px solid var(--cg-orange);
    padding: .3rem .4rem;
    font-size: 14px;
    line-height: 1rem;
}
.ccontent p {
    font-size: 14px;
}

.header {
    width: 100%;
    height: auto;
    background-color: var(--cg-white);
    border-bottom: var(--border-light);
    position: sticky;
    top:calc(-1 * var(--head-logo-h) - 1px);    /* border-bottom: 1px */
    z-index: 15;
    transition: all 0.5s ease;
}
.header-show {
    top: 0;
    box-shadow: 0px 0px 5px #0008;
}

.hcontent {
    font-size: 14px;
    max-width: var(--max-w);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.hcontent strong {
    font-size: 16px;
}

.hcontent a {
    color:var(--cg-dark);
}

.logo {
    background: url(../imagenes/Logo.svg) no-repeat;
    background-position: left center;
    width: var(--head-logo-w);
    height: var(--head-logo-h);
}

.boton-menu {
    display: none;
    font-size: 30px;
    align-self: center;
    padding: 0 20px;
}

.header-menu {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.menu {
    display: flex;
    margin-right: 15px;
}

.menSup {
    height: 100%;
}

.menSup ul {
    display: flex;
    height: 100%;
}

.menSup ul li {
    display: flex;
    cursor: pointer;
    border-left: var(--border-light);
    border-right: var(--border-light);
}
.menSup ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position:relative;
    top: 0;
    transition: all 0.5s;
    z-index: 20;
}
@media (hover: hover) {         /* Prevent sticky hover on touchscreen devices*/
    .menSup ul li:hover a {
        top: 20px;
        border-bottom: var(--border-light);
    }
}

.menSup ul li:not([href="contacto"]),
.menSup ul li:not([href="contacto"]) a {
    background-color: var(--cg-white);
}

.menSup ul li[href="contacto"] {
    background-color: var(--cg-orange);
    border: none;
}
.menSup ul li[href="contacto"] a {
    background-color: var(--cg-orange);
    color: white;
    font-weight: bold;
}
.menSup ul li[href="contacto"] i::before {
    color:var(--cg-white) !important;
}

.menu .session,
.menu .idiomas {
    display: none;
}

.menSup .opcionSel {
    color:var(--cg-dark);
    text-decoration: underline;
}
.session {
    width: 100%;
    margin-bottom: 5px;
}

.idiomas {
    width: 100%;
    font-size: 11px;
    margin-bottom: 5px;
}

.idiomas img {
    margin-right: 5px;
    vertical-align: middle;
    padding: 2px;
    cursor: pointer;
}
.cab-aviso {
    color:#e84c4f;
    float:right;
    font-size:16px;
    margin-top:5px;
}

.boton-menu-img {
    color: var(--cg-blue);
    display: inline-block;
    transition: transform 0.2s ease-in;
}
.boton-menu-img:hover {
    cursor: pointer;
}

.ncontent {
    height: 100%;
}

.menunav  {
    height: 100%;
}

.menunav ul li {
    text-decoration: none;
    display: inline;
    margin-left: 15px;
    padding: 0px 25px 0px 5px;
}

.menunav ul li .lista {
    display: block;
    margin-left: 0;
    white-space: nowrap;
    border-top: var(--border-light);
}

.menunav ul li .items {
    display: block;
    margin-left: 10px !important;
    white-space: nowrap;
    cursor: pointer;
    border-left: var(--border-light);
}

.nav-movil {
    display: none;
    max-height: calc(100vh - var(--head-logo-h));
    position: absolute;
    top: var(--head-logo-h);
    left: 0;
    background: var(--cg-white);
    width: 100%;
    height: auto;
    box-shadow: 0px 5px 5px #0008;
    z-index: 15;
}
.menu-movil {
    display: none;
    width: 100%;
    max-width: var(--max-w);
    margin: auto;
    overflow-y: auto;
}
.menuMovil-lista {
    display: flex;
    flex-direction: column;
    border-bottom: var(--border-light);
}
.menuMovil-lista > li {
    justify-content: space-between;
    border-top: var(--border-light);
}

.menuMovil-lista > li > a {
    font-size: 16px;
    font-weight: bold;
}
.menuMovil-lista > li > a > p {
    font-size: 14px;
    font-weight: normal;
}

.menuMovil-lista li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
}
.menuMovil-lista li > a {
    padding: 15px;
}
.menuMovil-lista ul li a {
    padding-left: 30px;
    font-size: 16px;
}

.menuMovil-lista a {
    color: var(--cg-blue);
}

@media (hover: hover) {         /* Prevent sticky hover on touchscreen devices*/
    .menuMovil-lista a:hover {
        color: var(--cg-white);
        background-color: var(--cg-blue);
    }
}

/* Sub-menuNav */
.menuMovil-lista ul {
    width: 100%;
}

.menuMovil-lista li a:first-child {
    flex-grow: 1;
}

.menuMovil-lista ul .lista {
    border-top: var(--border-light);
}

.menuMovil-lista .items {
    border-left: var(--border-light);
    margin-left: 30px;
}
.menuMovil-lista .items a {
    padding-left: 15px;
}

.menuMovil-lista ul a {
    height: inherit;
    white-space: nowrap;
    float: none;
    text-transform:none;
}

.btn-desplegar {
    padding: 7px 15px 10px !important;
    font-weight: bold;
    transition: transform 0.2s ease-in;
    rotate: 90deg;
}

.page {
    margin: auto;
}

.migas {
    width: 100%;
    background-color: var(--cg-dark);
}
.migas ul {
    max-width: var(--max-w);
    margin:auto;
    padding: 4px 10px;
    display: flex;
    flex-wrap: wrap;
}

.migas ul li {
    display: inline;
    padding: 0 2px 0;
    cursor: pointer;
    white-space: nowrap;
}

.migas a {
    text-decoration: none;
    color: var(--cg-white);
    display: inline-flex;
}

.migas a:hover {
    color: var(--cg-orange);
}
.migas a > * {
    margin-left: 5px;
    font-weight: normal;
}

.pcontent {
    display: flex;
    flex-direction: column;
}

.leftcol {
    width: 100%;
    background-color: var(--cg-dark);
}
.leftcol * {
    color: var(--cg-white);
    font-size: 14px;
}
.leftcol > ul {
    max-width: var(--max-w);
    margin:auto;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 5px 10px;
    overflow-x: auto;
}
@media (max-width: 800px) and (hover: none), (orientation: landscape) and (hover: none) {
    .leftcol > ul {flex-wrap: nowrap}
    .leftcol {position:relative}
    .leftcol::before {
        position: absolute;
        content: '';
        left: 0;
        height: 100%;
        width: 15px;
        background: linear-gradient(to right, var(--cg-dark),rgba(255, 255, 255, 0.001));
    }
    .leftcol::after {
        position: absolute;
        content: '';
        top:0;
        right: 0;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right,rgba(255, 255, 255, 0.001), var(--cg-dark));
    }
}
@media (min-width:1200px) and (orientation: landscape) and (hover: none)  {
    .leftcol::before {
        left: calc(var(--pad-max-w) - 10px);
    }
    .leftcol::after {
        right: calc(var(--pad-max-w) - 10px);
    }
}
.leftcol > ul > li {
    display: flex;
}
.leftcol > ul > li > a {
    border: 1px solid;
    border-radius: 2rem;
    padding: 2px 10px;
    white-space:nowrap;
}
.leftcol li ul {
    display:none !important;
}

.leftcol .oculto {
    display: none;
}

.submenu-lateral {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    display: none;
    padding: 5px 8px;
    position: absolute;
}

.rightcol {
    display: none !important;
}

.rightcol-m > br {
    display:none;
}
.rightcol ul li {
    display: block;
    text-align: center;
}

.rightcol img {
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    float:right;
}
.center ul {
    padding-left: 1rem;
}
.center li {
    position: relative;
    margin-bottom: 0.5rem;
    line-height: 1.5rem;
}
.center li:before {
    content: " ";
    display: block;
    float: left;
    position: absolute;
    left: -1rem;
    top: .5rem;
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: #0046fe;
}

.center > .capa {
    overflow: hidden;
    margin: auto;
    text-align: left;
}

/* Oculta div vacío en sección Contacto */
.center > .nivel:empty { display: none;}

/* Oculta div vacío en sección Menfis Demo */
.center > .nivel:has(.claseCF:empty) { display: none;}

/* Oculta divs vacíos en sección Soporte */
.center > .nivel > .claseCF:empty {display: none}


/* Expand clickable area of anchor to parent container
 * Source: https://codepen.io/potatoDie/pen/abzvGxG
 */
    /*.claseCF:has(> a) {
        position: relative;
    }
    .claseCF > a::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }*/

.claseCF {max-width: none !important}
.claseCF > a > img {
    width: 100%;
}

.capa > img:first-child {
    width: 100%;
}

.center .bordered-img {
    border: 0;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    line-height: 20px;
}

.capa > img + h1,
.capa > img + h2,
.capa > img + h3 {
    margin-top: 1em;
}

.capa > p > img {               /* Imagen en sección Clientes */
    margin: 20px auto 20px;
    display: block;
}

.CapaSF {
    position: relative;
    width: 100%;
    text-align: left;
    line-height: 18px;
    height: auto;
    display: inline-block;
    padding: 5px 2px 5px 2px;
}
.dialog {
    display: none;
    overflow: hidden;
}

.dialog .msgCont {
    position: relative;
    text-align: left;
    line-height: 18px;
    height: auto;
    display: inline-block;
    padding: 5px 2px 5px 2px;
}

.anexos {
    margin-top: 15px;
}

.foot {
    width: 100%;
	background: var(--cg-blue);
}

.fcontent{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: var(--cg-white);
    max-width: var(--max-w);
    margin: auto;
    padding: 5px 0px;
    background: transparent;
    font-size: 14px;
}

.fcontent a {
    color: var(--cg-white);
}

.fcontent a:hover {
    color: var(--cg-orange);
}

/*** Formularios ***/
.lineaForm {
    clear: both;
    display: flex;
    flex-wrap: wrap;
}
.elemForm {
    box-sizing: border-box;
    float: left;
    padding: 5px 3px;
    flex-grow: 1;
}
.elemForm .oblForm {
    margin-left: 5px;
}
.elemForm .labelForm:first-child {
    margin-left: 15px;
}
.labelForm :is(h1, h2, h3, h4, h5) {
    color:var(--cg-orange);
    text-align: center;
}
.labelForm ~ .inputForm {
    margin-top: 2px;
}
.inputForm {
    border: var(--border-light);
    box-sizing: border-box;
    padding: 10px 15px;
    width: 100%;
}
.selectForm {
    border: var(--border-light);
    box-sizing: border-box;
    padding: 10px 15px;
}
input.inputForm,
select.selectForm {
    border-radius: 999px;
}
textarea.inputForm {
    border-radius: 1rem;
}
.labelForm + .selectForm {
    margin-left: 5px;
}
.inputForm:focus,.selectForm:focus {
    outline: 2px solid var(--cg-orange);
    outline-offset: -3px;
}
.checkForm {
    margin-right: 5px;
}
.condiciones input {
    display: none;
}
.condiciones input:checked + label {
    background-color: #f0f0f0;

}
.condiciones label {
    color: #666;
    display: inline-block;
    padding: 8px 10px;
}
.condiciones label:hover {
  cursor: pointer;
}
section {
    background-color: #f0f0f0;
    min-height: 60px;
    display: none;
    padding: 20px 15px;

}
section > p {
    padding-bottom: 5px !important;
}

section a:hover {
    text-decoration: underline;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}
.botonForm {
    display: block;
    margin: 1rem auto;
}

.oblForm {
    color:var(--cg-orange);
    font-weight: bold;
}

.limpia {
    clear: both;
}

.oculto {
    display: none;
}

.img-redim{
  width:185px;
  cursor:pointer;
  position:relative;
}

.img-redim:hover{
  width:505px;
  transition: all 0.8s ease;
  cursor:pointer;
  position:absolute;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

.contactDialog {
    position: fixed;
    color: #fff;
    height: auto;
    max-width: 20px;
    padding: 10px;
    top: 35%;
    right: 0;
    background-color: orange;
    z-index: 89;
    opacity: 0.75;
    cursor: pointer;
    writing-mode: vertical-lr;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    vertical-align:baseline;
    line-height: 1.5em;
    display: none;
}

.contactDialog:hover {
    font-size:1.15em;
    padding: 11px;
    transition: all 0.2s;
    opacity:1;
}

.box-content-colapse {
  width: 70%;
  height: auto;
  position: relative;
}

.intro-colapse {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.details-comp {
  cursor: pointer;
  max-width: 70%;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 4px;
  position: relative;
  left: 0px;
  background-color: whitesmoke;
}

.details-comp:hover {
  background-color: #efefef;
}

.details-comp > p {
  padding: 0 16px;
}

.summary-colapse {
  list-style: none;
  border-radius: 8px;
  padding-left: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.summary-colapse::-webkit-details-marker {
  display: none;
}

.details-comp[open] > .summary-colapse::after {
  display: flex;
  justify-content: space-between;
  content:  "\276F";
  font-size: 16px;
  align-items: center;
  padding: 5px 10px;
  transform: rotate(90deg);
}

.details-comp > .summary-colapse::after {
  display: flex;
  justify-content: space-between;
  align-items: center;
  content:  "\276F";
  font-size: 16px;
  padding: 5px 10px;
}

.details-comp[open] p {
  animation: details-show 350ms linear;
}

.details-comp:not([open]) p {
  opacity: 0;
}

.rotar90 {
    transform: rotateZ(90deg);
}

.rotar180 {
    transform: rotateY(180deg);
}

@media screen and (max-width: 1200px), (hover:none) {
    form {
        padding: 2rem 1rem;
    }
    .nav{
        display: none;
    }
    .nav-movil {
        display: flex;
        flex-direction: column;
    }
    .boton-menu {
        display: block;
    }
}

/* Tablet */
@media screen and (max-width: 980px) {
    .cookies {
        height: auto;
    }
    .ncontent {
        width: 100%;
    }    
    .page {
        width: auto;
    }
    .migas ul li {
        white-space: normal;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --header-h: 75px;
        --foot-h: 120px;
        --card-w: 200px;
        --banner-sz: 200px;
    }
    .center > .nivel {
        flex-wrap: wrap;
    }
    .elemForm {
        width: 100% !important;
    }
}

/* Movil */
@media screen and (max-width: 600px) {
    :root {
        --card-w: 180px;
        --banner-sz: 180px;
        
        /* HEIGHT */
        --head-logo-w: 180px;
        --head-logo-h: 60px;
    }
    .boton-menu {
        font-size: 24px;
        padding: 0 10px;
    }
    .menSup ul li a {
        padding: 5px;
    }
    
    .menu {
        margin-right: 0px;
    }
    .condiciones label {
        display: block;
        background: #fff;
        border-top: 1px solid #eee;
    }
    .cab-aviso {
        display: none;
    }

    .header-menu {
        display: none;
    }
   
    .capa > p > img {
        width: 100%;        /* Imagen en sección Clientes */
    }
}