/* Importar fuentes */
@font-face {
  font-family: Fixture; /* set name */
  src: url(https://www.sodimac.cl/static/CSS/fonts/Fixture-Regular.woff); /* url of the font */
}


/* General */
.resp {
    width: 100%;
    height: auto;
}
.hiddden-xs {
    display: block;
}
.visible-xs {
    display: none;
}
@media (max-width: 640px) {
    .hiddden-xs {
        display: none;
    }
    .visible-xs {
        display: block;
    }
}

/* cabecera ces*/
.llamado-ces { 
    text-align: center;
    font-family: 'Lato', sans-serif;
    width: 46vw;
    margin: 0 auto;
    top: -24px;
    position: relative;
}
.llamado-ces h1 {
    font-size: 54px;
    margin: 0;
    padding: 0;
    line-height: 100%;
    text-transform: uppercase;
    font-weight: 900;
}
.llamado-ces h1 span {
    display: inline-block;
    font-weight: normal;
    color: #ffd600;
    font-size: 14px;
    line-height: 100%;
    text-align: center;
    margin: 0 auto 8px;
    background-color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    text-transform: none;
    margin-bottom: 12px;
}
.llamado-ces h1 small { 
    font-size: 2rem;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 100%;
    font-weight: normal;
}
.llamado-ces h1::after {
    content: "";
    width: 100%;
    height: 6px;
    background-color: #ffd600;
    position: relative;
    display: block;
    margin: 16px 0;
}
.llamado-ces p {
    font-size: 18px;
    line-height: 130%;
}
@media (max-width: 640px) {
    .llamado-ces {
        width: 100%;
    }
    .llamado-ces h1 {
        font-size: 40px;
    }
    .llamado-ces h1 small {
        font-size: 28px;
    }
    .llamado-ces p {
        font-size: 16px;
    }
}


.compare-socios a {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}

/* fondo carrusel */
.fondo-carrusel {
    width: 1344px;
    height: 512px;
    position: absolute;
    margin-left: -672px;
    left: 50%;
    z-index: -1;
    top: -16px;
    background-image: url(https://images.contentstack.io/v3/assets/blt34d59f5b52e53f95/blt6e074e2e1b003f44/63e2a99050d1a61113a2fef9/bkg-ces.jpg);
    border-radius: 4px;
    overflow: hidden;
}
.fondo-carrusel-2 {
    width: 1344px;
    height: 512px;
    position: absolute;
    margin-left: -672px;
    left: 50%;
    z-index: -1;
    top: 174px;
    background-image: url(https://images.contentstack.io/v3/assets/blt34d59f5b52e53f95/blt6e074e2e1b003f44/63e2a99050d1a61113a2fef9/bkg-ces.jpg);
    border-radius: 4px;
    overflow: hidden;
}
@media (max-width: 640px) {
    .fondo-carrusel {
        display: none;
    }
    .fondo-carrusel-2 {
        display: none;
    }
}


/* edit carousel */
.product-price-special-card-carousel div {
    padding: 0;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
    background: #ffd600;
    padding: 10px 0;
    width: 86px;
    border-radius: 4px;
}
.carousel-indicators li {
    background-color: #000;
}
.carousel-indicators li.active {
    background-color: #333;
}

/* titulo tabla */
.titu-tabla-socio {
    font-size: 48px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}
.titu-tabla-socio small {
    font-size: 18px;
    position: relative;
    display: block;
    text-transform: initial;
}
.titu-tabla-socio::after {
    content: "";
    width: 100%;
    height: 6px;
    background-color: #ffd600;
    position: relative;
    display: block;
    margin: 16px 0;
}

/* tabla ces */
.tabla-ces {
    width: 100%; 
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}
.tabla-ces table {
    width: 100%; 
    height: auto;
    display: table;
    background-color: #ffd600;
    text-align: center;
    border: 0;
    padding: 0;
    border-collapse: collapse;
}
.tabla-ces table thead {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}
.tabla-ces table thead td {
    padding: 12px 0;
}
.tabla-ces table thead td img {
    width: 100%;
    height: auto;
    max-width: 86px;
    margin: 0 auto;
}
.tabla-ces table thead td p {
    text-transform: uppercase;
}
.tabla-ces table tbody {
    font-size: 14px;
}
.tabla-ces table tbody td {
    padding: 12px 0;
    border-bottom: solid 1px #555;
    width: 33%;
    font-size: 32px;
    font-weight: 600;
}
.tabla-ces table tbody td:first-child {
    text-align: center;
    padding: 12px 16px;
    background-color: #333;
    width: 33%;
}
/*
.tabla-ces table tbody td:first-child::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 8px;
    background-color: #333;
    display: inline-block;
    margin-right: 12px;
}
*/
.tabla-ces table tbody td:first-child::after {
    display: none;
}
.tabla-ces table tbody td::after {
    content: "%";
    position: relative;
    display: inline-block;
}
.tabla-ces table tfoot {
    background-color: #666;
    color: #ffd600;
    font-size: 12px;
    font-weight: bold;
}
.tabla-ces table tfoot td {
    padding: 8px 0;
}
.tabla-ces table tfoot td img {
    width: 100%;
    height: auto;
    max-width: 86px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .tabla-ces table tbody td:first-child img {
        width: 100%;
        height: auto;
    }
}


/* REDISEÑO CES 2026 - JSDG */
/* Subtitulos H2 */
.h2-ces h2 {
    font-family: 'Fixture', sans-serif !important;
    font-size: 34px;
    font-weight: bold;
    color: #333;
    line-height: 110%;
    text-align: center;
    margin-bottom: 0px !important;
    text-transform: uppercase;
}


/* Tabla de ahorros */
.dscto-ces { width: 100%; max-width: 1250px; font-family: 'Lato', sans-serif;}
.dscto-ces td { border: solid 2px #fff; background-color: #EEE;}
.dscto-ces thead tr td { background-color: #222; color: #fff; padding: 12px 0;}
.dscto-ces thead tr td h2 { width: 100%; max-width: 200px; margin: 0 auto; padding: 0; font-size: 16px; text-align: left; line-height: 110%; text-transform: uppercase;}
.dscto-ces thead tr td h2 span { font-weight: lighter; display: block;}
.dscto-ces tbody tr td:first-child { background-color: #ffd600; font-size: 16px;}
.dscto-ces tbody tr td { width: 33%; font-size: 44px; font-weight: 800; text-align: center; color: #333;}

@media (max-width: 640px) {
    .dscto-ces thead tr td h2 { font-size: 12px; text-align: center;}
}

/* Pills beneficios */
.ces-beneficios-pills { width: 100%; height: auto; font-family: 'Lato', sans-serif; font-weight: normal;}
.ces-beneficios-pills h3 { margin: 0; padding: 6px 12px; background: #333; color: #ffd600; position: relative; display: inline-block; font-size: 16px; border-radius: 20px;}
.ces-beneficios-pills ul { margin-top: 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.ces-beneficios-pills ul li { list-style: none; padding: 4px 8px; background-color: #eee; border-radius: 20px; margin: 4px; font-size: 14px;}
.ces-beneficios-pills ul li.link-registro { background-color: #666;}
.ces-beneficios-pills ul li.link-registro a { color: #fff; text-decoration: none;}
.ces-beneficios-pills ul li.link-registro:hover { background-color: #222;}
.ces-beneficios-pills ul li.link-registro a:hover { color: #ffdc00;}

@media (max-width: 640px) {
    .bene-socio > div > div { padding: 0;}
    .dscto-ces tbody tr td:first-child { line-height: 110%;}
    .dscto-ces tbody tr td { font-size: 38px;}
}


/* Info cards */
.ces-info-card {width: 32%;max-width: 400px;border-radius: 4px;}
.ces-info-card a { text-decoration: none; color: rgb(51,51,51);}
.ces-info-card a:hover { text-decoration: none; color: rgb(51,51,51);}
.ces-info-card div.card-info {
    background-color: #fff;
    padding: 12px 12px 24px;
    line-height: 120%;
    border: solid 1px #eee; 
    min-height: 200px; 
    position: relative; 
    display: block;
}
.ces-info-card div.card-info h3 {font-size: 16px;text-transform: uppercase;font-weight: 900;margin: 0 0 16px;}
.ces-info-card div.card-info p span.legal { font-size: 12px; font-style: italic;}
.ces-info-card div.card-info .ces-link-card { 
    font-size: 14px;
    display: block;
    width: 140px;
    position: absolute;
    background: #666;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    bottom: -15px;
    left: 50%;
    margin-left: -70px;
    padding: 8px 16px;
}
.ces-info-card a:hover div.card-info .ces-link-card {
    background: #222;
    color: #ffdc00;
    text-decoration: none;
}
.ces-bkg-info {background-color: #ffdc00;top: -34px;z-index: -1;width: 100vw;height: 540px;position: absolute;margin-left: -50vw;left: 50%;}

@media (max-width: 640px) {
    .ces-info-card { width: 90%; min-width: 320px; margin: 0 2%;}
}


/* Info Academia */
.resp { width: 100%; height: auto;}
.ces-box-academia {
    background-color: #f6f6f6;
    display: flex;
    padding: 48px;
    width: 100%;
    max-width: 1250px;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}
.ces-box-academia > div:first-child { width: 60%;}
.ces-box-academia > div:last-child { width: 40%;}
.ces-box-academia .logo-academia {max-width: 438px;}
.ces-box-academia h2 {visibility: hidden; height: 0px; margin: 0; padding: 0;}
.ces-box-academia p.bajada {font-size: 18px; font-weight: 600; margin-top: 24px; line-height: 130%;}    
.ces-box-academia ul {display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 32px 0 0; padding: 0; max-width: 90%;}
.ces-box-academia ul li {list-style: none; margin: 0; padding: 16px; max-width: 32%; border: solid 1px #e0e0e0; border-radius: 12px;}
.ces-box-academia .ces-link-academia { 
    padding: 8px 16px;
    background-color: #666;
    color: #fff;
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
    top: -18px;
    border-radius: 20px;
}
.ces-box-academia a:hover .ces-link-academia {
    background-color: #222;
    color: #ffdc00;
    text-decoration: none;
}
.ces-box-academia a:hover {
    text-decoration: none;
}

@media (max-width: 640px) {
    .ces-box-academia { flex-wrap: wrap; padding: 24px;}
    .ces-box-academia > div { width: 100% !important;}
    .ces-box-academia ul { flex-wrap: wrap; max-width: 100%;}
    .ces-box-academia ul li { width: 100%; max-width: 100%; margin: 2% 0;}
}