/*
    content.css
    - A simple css for basic formatting
    - Used to format the built-in snippets (content blocks) in ContentBuilder.js
    - You can adjust or customize this css according to your site design
    - Can be combined with popular css frameworks    
*/
@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,600,800');
/* default font */
@import url("../ionicons/css/ionicons.min.css");
/* Icon support */


/**********************************
    Adjustment for css frameworks
***********************************/

/* For UIKit */
html {
    color: #000;
}

/* For Material Design Lite */
.mdl-cell {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Images' default margin */
.container img {
    /* margin: 1.4rem 0 1rem; */
}


/**********************************
    Basic Elements
***********************************/

a,
a:hover,
a:active,
a:visited,
a:focus {
    color: #009E91;
}

hr {
    background: none;
    background-color: transparent;
    border: none;
    border-top: rgba(0, 0, 0, 0.18) 1px solid;
    margin: 30px 0 25px;
    padding: 5px;
}

img {
    max-width: 100%;
}

figure {
    margin: 0
}

/*ol, ul {line-height: inherit; font-weight: inherit;}
ul {
    list-style: initial;
    padding-left: 20px;
}
ul li {
    list-style: initial;
}
ol {padding-left: 20px;}
*/
table td {
    padding: 12px;
}

pre {
    font-family: courier;
    font-size: 1rem;
    white-space: pre-wrap;
    line-height: 1.4;
    padding: 15px;
    background: rgba(0, 0, 0, 0.03);
}

blockquote {
    margin: 16px 40px;
}

b,
strong {
    font-weight: 600;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

/**********************************
    Simple Grid 
    (if css framework not used)
***********************************/
.container {
    margin: 0 auto;
    max-width: 800px;
}

@media (min-width: 40rem) {
    .column {
        float: left;
        padding-left: 1rem;
        /* beta3 */
        padding-right: 1rem;
        /* beta3 */
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .column.full {
        width: 100%;
    }

    .column.two-third {
        width: 66.7%;
    }

    .column.two-fourth {
        width: 75%;
    }

    .column.two-fifth {
        width: 80%;
    }

    .column.two-sixth {
        width: 83.3%;
    }

    .column.half {
        width: 50%;
    }

    .column.third {
        width: 33.3%;
    }

    .column.fourth {
        width: 25%;
    }

    .column.fifth {
        width: 20%;
    }

    .column.sixth {
        width: 16.6%;
    }

    .column.flow-opposite {
        float: right;
    }
}

/* El editor usa .row + .clearfix (grid propio: .column{float:left} + el
   clearfix clásico de abajo) para su sistema de filas/columnas — pero
   "row" es también el nombre de la clase de grid de Bootstrap
   (display:flex; margin:0 -15px), cargado globalmente en todo el sitio
   (tanto en el admin como en público). Bootstrap termina ganando y
   convierte las filas del editor en flex, lo que rompe: 1) poner 2+
   columnas lado a lado (se apilan), y 2) soltar snippets nuevos dentro de
   una columna ya existente (SortableJS calcula mal la posición de
   inserción sobre un contenedor flex). Esta regla usa dos clases (más
   específica que el .row de Bootstrap, que usa una sola) para ganar sin
   necesitar !important. */
.row.clearfix {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/**********************************
    Useful Classes
***********************************/

.center {
    text-align: center
}

.right {
    text-align: right
}

.left {
    text-align: left
}

.img-circular {
    display: inline-block;
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.img-circular img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
}

.padding-20 {
    padding: 20px
}

.padding-25 {
    padding: 25px
}

.padding-30 {
    padding: 30px
}

.padding-35 {
    padding: 35px
}

.padding-40 {
    padding: 40px
}

@media all and (max-width: 540px) {

    /*.center {text-align:initial}
    .right {text-align:initial}
    .left {text-align:initial}*/
    .padding-20 {
        padding: 0
    }

    .padding-25 {
        padding: 0
    }

    .padding-30 {
        padding: 0
    }

    .padding-35 {
        padding: 0
    }

    .padding-40 {
        padding: 0
    }
}

.margin-0 {
    margin: 0 !important
}

.margin-20 {
    margin: 20px !important
}

.margin-25 {
    margin: 25px !important
}

.margin-30 {
    margin: 30px !important
}

.margin-35 {
    margin: 35px !important
}

.margin-40 {
    margin: 40px !important
}

.is-card {
    display: table;
    background-color: #fff;
}

.is-card>* {
    display: table;
}

.is-card-circle {
    width: 280px;
    height: 280px;
    border-radius: 500px;
    padding: 70px;
    margin: 0 auto;
}

@media all and (max-width: 540px) {
    .is-card-circle {
        zoom: 0.7;
        -moz-transform: scale(0.7);
    }
}

.is-card-content-centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.max-390 {
    max-width: 390px;
    margin: 0 auto;
}

.shadow-1 {
    /* card */
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.shadow-2 {
    /* screenshot */
    -webkit-box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
}

.shadow-3 {
    /* highlight */
    -webkit-box-shadow: 0 0px 100px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0px 100px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0px 100px rgba(0, 0, 0, 0.2);
}

img.circle {
    border-radius: 500px;
    margin-top: 0;
}

img.bordered {
    border: #ccc 1px solid;
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 1.4em;
    margin-bottom: 1em;
}

.embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive.embed-responsive-4by3 {
    padding-bottom: 75%;
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.list {
    position: relative;
    margin: 1.5em 0;
    box-shadow: none;
}

.list>i {
    position: absolute;
    left: -3px;
    top: 7px;
    font-size: 1.7em;
    line-height: 1;
}

.list>h2,
.list>h3 {
    margin: 0 0 0 50px !important;
    line-height: 1.2 !important;
}

.list>p {
    margin: 5px 0 0 50px !important
}

.quote {
    position: relative;
    margin: 1.5em 0;
}

.quote>i {
    position: absolute;
    top: -10px;
    left: -7px;
    font-size: 2em;
}

.quote>small {
    margin-left: 50px;
    opacity: 0.7;
    font-size: 1em;
}

.quote>p {
    margin-left: 50px;
    font-size: 1.5em;
}

@media all and (max-width: 540px) {
    .quote>i {
        left: -15px;
        font-size: 1.5em;
    }

    .quote>small {
        margin-left: 20px;
        ont-size: 1em;
    }

    .quote>p {
        margin-left: 20px;
        font-size: 1.2em;
    }
}

.is-social {
    line-height: 1;
    margin-bottom: 1.5em
}

.is-social a>i {
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    margin: 0 15px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.is-social a:first-child>i {
    margin: 0 15px 0 0
}

.is-social a:last-child>i {
    margin: 0 0 0 15px
}

.is-social a:hover>i {
    color: #08c9b9;
}

.is-light-text .is-social a>i {
    color: #fff
}

.is-light-text .is-social a:hover>i {
    color: #fff
}

.is-dark-text .is-social a>i {
    color: #000
}

.is-dark-text .is-social a:hover>i {
    color: #000
}

.is-rounded-button-big {}

.is-rounded-button-big a {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
    border-radius: 500px;
    width: 110px;
    height: 110px;
    background-color: #aaa;
    overflow: hidden;
    text-decoration: none;
}

.is-rounded-button-big a i {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-rounded-button-big a:first-child {
    margin: 0 20px 0 0;
}

.is-rounded-button-big a:last-child {
    margin: 0 0 0 20px;
}

.is-rounded-button-medium {}

.is-rounded-button-medium a {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
    border-radius: 500px;
    width: 70px;
    height: 70px;
    background-color: #aaa;
    overflow: hidden;
    text-decoration: none;
}

.is-rounded-button-medium a i {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-rounded-button-medium a:first-child {
    margin: 0 20px 0 0;
}

.is-rounded-button-medium a:last-child {
    margin: 0 0 0 20px;
}

.is-boxed-button-big {
    display: inline-block;
}

.is-boxed-button-big a {
    display: table;
    float: left;
    text-align: center;
    margin: 0 30px 0 0;
    width: 110px;
    height: 110px;
    background-color: #aaa;
    text-decoration: none;
}

.is-boxed-button-big a i {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-boxed-button-big2 {
    display: inline-block;
}

.is-boxed-button-big2 a {
    display: table;
    float: left;
    text-align: center;
    margin: 0 30px 0 0;
    width: 150px;
    height: 70px;
    background-color: #aaa;
    text-decoration: none;
}

.is-boxed-button-big2 a i {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-boxed-button-medium {
    display: inline-block;
}

.is-boxed-button-medium a {
    display: table;
    float: left;
    text-align: center;
    margin: 0 30px 0 0;
    width: 70px;
    height: 70px;
    background-color: #aaa;
    text-decoration: none;
}

.is-boxed-button-medium a i {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-boxed-button-medium2 {
    display: inline-block;
}

.is-boxed-button-medium2 a {
    display: table;
    float: left;
    text-align: center;
    margin: 0 30px 0 0;
    width: 100px;
    height: 50px;
    background-color: #aaa;
    text-decoration: none;
}

.is-boxed-button-medium2 a i {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-boxed-button-small {
    display: inline-block;
}

.is-boxed-button-small a {
    display: table;
    float: left;
    text-align: center;
    margin: 0 20px 0 0;
    width: 50px;
    height: 50px;
    background-color: #aaa;
    text-decoration: none;
}

.is-boxed-button-small a i {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    color: #ffffff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.height-20 {
    height: 20px
}

.height-40 {
    height: 40px
}

.height-60 {
    height: 60px
}

.height-80 {
    height: 80px
}

.height-100 {
    height: 100px
}

.height-120 {
    height: 120px
}

.height-140 {
    height: 140px
}

.height-160 {
    height: 160px
}

.height-180 {
    height: 180px
}

.height-200 {
    height: 200px
}

.height-220 {
    height: 220px
}

.height-240 {
    height: 240px
}

.height-260 {
    height: 260px
}

.height-280 {
    height: 280px
}

.height-300 {
    height: 300px
}

@media (max-width: 640px) {
    .height-20 {
        height: 20px
    }

    .height-40 {
        height: 30px
    }

    .height-60 {
        height: 40px
    }

    .height-80 {
        height: 45px
    }

    .height-100 {
        height: 50px
    }

    .height-120 {
        height: 55px
    }

    .height-140 {
        height: 60px
    }

    .height-160 {
        height: 65px
    }

    .height-180 {
        height: 70px
    }

    .height-200 {
        height: 75px
    }

    .height-220 {
        height: 80px
    }

    .height-240 {
        height: 85px
    }

    .height-260 {
        height: 90px
    }

    .height-280 {
        height: 95px
    }

    .height-300 {
        height: 100px
    }
}

.size-12 {
    font-size: 12px !important
}

.size-14 {
    font-size: 14px !important
}

.size-16 {
    font-size: 16px !important
}

.size-18 {
    font-size: 18px !important
}

.size-21 {
    font-size: 21px !important
}

.size-24 {
    font-size: 24px !important
}

.size-28 {
    font-size: 28px !important
}

.size-32 {
    font-size: 32px !important
}

.size-35 {
    font-size: 35px !important
}

.size-38 {
    font-size: 38px !important
}

.size-42 {
    font-size: 42px !important
}

.size-46 {
    font-size: 46px !important
}

.size-48 {
    font-size: 48px !important
}

.size-50 {
    font-size: 50px !important
}

.size-54 {
    font-size: 54px !important
}

.size-60 {
    font-size: 60px !important
}

.size-64 {
    font-size: 64px !important
}

.size-68 {
    font-size: 68px !important
}

.size-72 {
    font-size: 72px !important
}

.size-76 {
    font-size: 76px !important
}

.size-80 {
    font-size: 80px !important
}

.size-84 {
    font-size: 84px !important
}

.size-88 {
    font-size: 88px !important
}

.size-92 {
    font-size: 92px !important
}

.size-96 {
    font-size: 96px !important
}

.size-100 {
    font-size: 100px !important
}

.size-104 {
    font-size: 104px !important
}

.size-108 {
    font-size: 108px !important
}

.size-112 {
    font-size: 112px !important
}

.size-116 {
    font-size: 116px !important
}

.size-120 {
    font-size: 120px !important
}

.size-124 {
    font-size: 124px !important
}

.size-128 {
    font-size: 128px !important
}

.size-132 {
    font-size: 132px !important
}

.size-136 {
    font-size: 136px !important
}

.size-140 {
    font-size: 140px !important
}

.size-144 {
    font-size: 144px !important
}

.size-148 {
    font-size: 148px !important
}

.size-152 {
    font-size: 152px !important
}

.size-156 {
    font-size: 156px !important
}

.size-160 {
    font-size: 160px !important
}

.size-164 {
    font-size: 164px !important
}

.size-168 {
    font-size: 168px !important
}

.size-172 {
    font-size: 172px !important
}

.size-176 {
    font-size: 176px !important
}

.size-180 {
    font-size: 180px !important
}

.size-184 {
    font-size: 184px !important
}

.size-188 {
    font-size: 188px !important
}

.size-192 {
    font-size: 192px !important
}

.size-196 {
    font-size: 196px !important
}

.size-200 {
    font-size: 200px !important
}

.size-204 {
    font-size: 204px !important
}

.size-208 {
    font-size: 208px !important
}

.size-212 {
    font-size: 212px !important
}

.size-216 {
    font-size: 216px !important
}

.size-220 {
    font-size: 220px !important
}

@media all and (max-width: 1024px) {
    .size-12 {
        font-size: 12px !important
    }

    .size-14 {
        font-size: 14px !important
    }

    .size-16 {
        font-size: 16px !important
    }

    .size-18 {
        font-size: 18px !important
    }

    .size-21 {
        font-size: 21px !important
    }

    .size-24 {
        font-size: 24px !important
    }

    .size-28 {
        font-size: 28px !important
    }

    .size-32 {
        font-size: 32px !important
    }

    .size-35 {
        font-size: 35px !important
    }

    .size-38 {
        font-size: 38px !important
    }

    .size-42 {
        font-size: 42px !important
    }

    .size-46 {
        font-size: 46px !important
    }

    .size-48 {
        font-size: 48px !important
    }

    .size-50 {
        font-size: 50px !important
    }

    .size-54 {
        font-size: 54px !important
    }

    .size-60 {
        font-size: 60px !important
    }

    .size-64 {
        font-size: 64px !important
    }

    .size-68 {
        font-size: 68px !important
    }

    .size-72 {
        font-size: 72px !important
    }

    .size-76 {
        font-size: 73px !important
    }

    .size-80 {
        font-size: 74px !important
    }

    .size-84 {
        font-size: 75px !important
    }

    .size-88 {
        font-size: 76px !important
    }

    .size-92 {
        font-size: 77px !important
    }

    .size-96 {
        font-size: 78px !important
    }

    .size-100 {
        font-size: 79px !important
    }

    .size-104 {
        font-size: 80px !important
    }

    .size-108 {
        font-size: 81px !important
    }

    .size-112 {
        font-size: 82px !important
    }

    .size-116 {
        font-size: 84px !important
    }

    .size-120 {
        font-size: 85px !important
    }

    .size-124 {
        font-size: 86px !important
    }

    .size-128 {
        font-size: 87px !important
    }

    .size-132 {
        font-size: 88px !important
    }

    .size-136 {
        font-size: 89px !important
    }

    .size-140 {
        font-size: 90px !important
    }

    .size-144 {
        font-size: 91px !important
    }

    .size-148 {
        font-size: 92px !important
    }

    .size-152 {
        font-size: 93px !important
    }

    .size-156 {
        font-size: 94px !important
    }

    .size-160 {
        font-size: 95px !important
    }

    .size-164 {
        font-size: 96px !important
    }

    .size-168 {
        font-size: 97px !important
    }

    .size-172 {
        font-size: 98px !important
    }

    .size-176 {
        font-size: 99px !important
    }

    .size-180 {
        font-size: 100px !important
    }

    .size-184 {
        font-size: 111px !important
    }

    .size-188 {
        font-size: 112px !important
    }

    .size-192 {
        font-size: 113px !important
    }

    .size-196 {
        font-size: 114px !important
    }

    .size-200 {
        font-size: 115px !important
    }

    .size-204 {
        font-size: 116px !important
    }

    .size-208 {
        font-size: 117px !important
    }

    .size-212 {
        font-size: 118px !important
    }

    .size-216 {
        font-size: 119px !important
    }

    .size-220 {
        font-size: 120px !important
    }
}

@media all and (max-width: 640px) {
    .size-12 {
        font-size: 12px !important
    }

    .size-14 {
        font-size: 14px !important
    }

    .size-16 {
        font-size: 16px !important
    }

    .size-18 {
        font-size: 18px !important
    }

    .size-21 {
        font-size: 21px !important
    }

    .size-24 {
        font-size: 22px !important
    }

    .size-28 {
        font-size: 24px !important
    }

    .size-32 {
        font-size: 26px !important
    }

    .size-35 {
        font-size: 28px !important
    }

    .size-38 {
        font-size: 30px !important
    }

    .size-42 {
        font-size: 32px !important
    }

    .size-46 {
        font-size: 34px !important
    }

    .size-48 {
        font-size: 36px !important
    }

    .size-50 {
        font-size: 36px !important
    }

    .size-54 {
        font-size: 36px !important
    }

    .size-60 {
        font-size: 36px !important
    }

    .size-64 {
        font-size: 36px !important
    }

    .size-68 {
        font-size: 36px !important
    }

    .size-72 {
        font-size: 36px !important
    }

    .size-76 {
        font-size: 36px !important
    }

    .size-80 {
        font-size: 36px !important
    }

    .size-84 {
        font-size: 36px !important
    }

    .size-88 {
        font-size: 36px !important
    }

    .size-92 {
        font-size: 36px !important
    }

    .size-96 {
        font-size: 36px !important
    }

    .size-100 {
        font-size: 36px !important
    }

    .size-104 {
        font-size: 36px !important
    }

    .size-108 {
        font-size: 36px !important
    }

    .size-112 {
        font-size: 36px !important
    }

    .size-116 {
        font-size: 36px !important
    }

    .size-120 {
        font-size: 36px !important
    }

    .size-124 {
        font-size: 36px !important
    }

    .size-128 {
        font-size: 36px !important
    }

    .size-132 {
        font-size: 36px !important
    }

    .size-136 {
        font-size: 36px !important
    }

    .size-140 {
        font-size: 36px !important
    }

    .size-144 {
        font-size: 36px !important
    }

    .size-148 {
        font-size: 36px !important
    }

    .size-152 {
        font-size: 36px !important
    }

    .size-156 {
        font-size: 36px !important
    }

    .size-160 {
        font-size: 36px !important
    }

    .size-164 {
        font-size: 36px !important
    }

    .size-168 {
        font-size: 36px !important
    }

    .size-172 {
        font-size: 36px !important
    }

    .size-176 {
        font-size: 36px !important
    }

    .size-180 {
        font-size: 36px !important
    }

    .size-184 {
        font-size: 36px !important
    }

    .size-188 {
        font-size: 36px !important
    }

    .size-192 {
        font-size: 36px !important
    }

    .size-196 {
        font-size: 36px !important
    }

    .size-200 {
        font-size: 36px !important
    }

    .size-204 {
        font-size: 36px !important
    }

    .size-208 {
        font-size: 36px !important
    }

    .size-212 {
        font-size: 36px !important
    }

    .size-216 {
        font-size: 36px !important
    }

    .size-220 {
        font-size: 36px !important
    }
}

/* If text wrapped with span-style during editing, don't apply the fix here (See line59) */
/*
.size-12 span {font-size:12px !important}
.size-14 span {font-size:14px !important}
.size-16 span {font-size:16px !important}
.size-18 span {font-size:18px !important}
.size-21 span {font-size:21px !important}
.size-24 span {font-size:24px !important}
.size-28 span {font-size:28px !important}
.size-32 span {font-size:32px !important}
.size-35 span {font-size:35px !important}
.size-38 span {font-size:38px !important}
.size-42 span {font-size:42px !important}
.size-46 span {font-size:46px !important}
.size-48 span {font-size:48px !important}
.size-50 span {font-size:50px !important}
.size-54 span {font-size:54px !important}
.size-60 span {font-size:60px !important}
.size-64 span {font-size:64px !important}
.size-68 span {font-size:68px !important}
.size-72 span {font-size:72px !important}
.size-76 span {font-size:76px !important}
.size-80 span {font-size:80px !important}
.size-84 span {font-size:84px !important}
.size-88 span {font-size:88px !important}
.size-92 span {font-size:92px !important}
.size-96 span {font-size:96px !important}
.size-100 span {font-size:100px !important}
.size-104 span {font-size:104px !important}
.size-108 span {font-size:108px !important}
.size-112 span {font-size:112px !important}
.size-116 span {font-size:116px !important}
.size-120 span {font-size:120px !important}
.size-124 span {font-size:124px !important}
.size-128 span {font-size:128px !important}
.size-132 span {font-size:132px !important}
.size-136 span {font-size:136px !important}
.size-140 span {font-size:140px !important}
.size-144 span {font-size:144px !important}
.size-148 span {font-size:148px !important}
.size-152 span {font-size:152px !important}
.size-156 span {font-size:156px !important}
.size-160 span {font-size:160px !important}
.size-164 span {font-size:164px !important}
.size-168 span {font-size:168px !important}
.size-172 span {font-size:172px !important}
.size-176 span {font-size:176px !important}
.size-180 span {font-size:180px !important}
.size-184 span {font-size:184px !important}
.size-188 span {font-size:188px !important}
.size-192 span {font-size:192px !important}
.size-196 span {font-size:196px !important}
.size-200 span {font-size:200px !important}
.size-204 span {font-size:204px !important}
.size-208 span {font-size:208px !important}
.size-212 span {font-size:212px !important}
.size-216 span {font-size:216px !important}
.size-220 span {font-size:220px !important}

@media all and (max-width: 1024px) {
    .size-12 span {font-size:12px !important}
    .size-14 span {font-size:14px !important}
    .size-16 span {font-size:16px !important}
    .size-18 span {font-size:18px !important}
    .size-21 span {font-size:21px !important}
    .size-24 span {font-size:24px !important}
    .size-28 span {font-size:28px !important}
    .size-32 span {font-size:32px !important}
    .size-35 span {font-size:35px !important}
    .size-38 span {font-size:38px !important}
    .size-42 span {font-size:42px !important}
    .size-46 span {font-size:46px !important}
    .size-48 span {font-size:48px !important}
    .size-50 span {font-size:50px !important}
    .size-54 span {font-size:54px !important}
    .size-60 span {font-size:60px !important}
    .size-64 span {font-size:64px !important}
    .size-68 span {font-size:68px !important}
    .size-72 span {font-size:72px !important}
    .size-76 span {font-size:73px !important}
    .size-80 span {font-size:74px !important}
    .size-84 span {font-size:75px !important}
    .size-88 span {font-size:76px !important}
    .size-92 span {font-size:77px !important}
    .size-96 span {font-size:78px !important}
    .size-100 span {font-size:79px !important}
    .size-104 span {font-size:80px !important}
    .size-108 span {font-size:81px !important}
    .size-112 span {font-size:82px !important}
    .size-116 span {font-size:84px !important}
    .size-120 span {font-size:85px !important}
    .size-124 span {font-size:86px !important}
    .size-128 span {font-size:87px !important}
    .size-132 span {font-size:88px !important}
    .size-136 span {font-size:89px !important}
    .size-140 span {font-size:90px !important}
    .size-144 span {font-size:91px !important}
    .size-148 span {font-size:92px !important}
    .size-152 span {font-size:93px !important}
    .size-156 span {font-size:94px !important}
    .size-160 span {font-size:95px !important}
    .size-164 span {font-size:96px !important}
    .size-168 span {font-size:97px !important}
    .size-172 span {font-size:98px !important}
    .size-176 span {font-size:99px !important}
    .size-180 span {font-size:100px !important}
    .size-184 span {font-size:111px !important}
    .size-188 span {font-size:112px !important}
    .size-192 span {font-size:113px !important}
    .size-196 span {font-size:114px !important}
    .size-200 span {font-size:115px !important}
    .size-204 span {font-size:116px !important}
    .size-208 span {font-size:117px !important}
    .size-212 span {font-size:118px !important}
    .size-216 span {font-size:119px !important}
    .size-220 span {font-size:120px !important}    
}
*/

@media all and (max-width: 640px) {
    .size-12 span {
        font-size: 12px !important
    }

    .size-14 span {
        font-size: 14px !important
    }

    .size-16 span {
        font-size: 16px !important
    }

    .size-18 span {
        font-size: 18px !important
    }

    .size-21 span {
        font-size: 21px !important
    }

    .size-24 span {
        font-size: 22px !important
    }

    .size-28 span {
        font-size: 24px !important
    }

    .size-32 span {
        font-size: 26px !important
    }

    .size-35 span {
        font-size: 28px !important
    }

    .size-38 span {
        font-size: 30px !important
    }

    .size-42 span {
        font-size: 32px !important
    }

    .size-46 span {
        font-size: 34px !important
    }

    .size-48 span {
        font-size: 36px !important
    }

    .size-50 span {
        font-size: 36px !important
    }

    .size-54 span {
        font-size: 36px !important
    }

    .size-60 span {
        font-size: 36px !important
    }

    .size-64 span {
        font-size: 36px !important
    }

    .size-68 span {
        font-size: 36px !important
    }

    .size-72 span {
        font-size: 36px !important
    }

    .size-76 span {
        font-size: 36px !important
    }

    .size-80 span {
        font-size: 36px !important
    }

    .size-84 span {
        font-size: 36px !important
    }

    .size-88 span {
        font-size: 36px !important
    }

    .size-92 span {
        font-size: 36px !important
    }

    .size-96 span {
        font-size: 36px !important
    }

    .size-100 span {
        font-size: 36px !important
    }

    .size-104 span {
        font-size: 36px !important
    }

    .size-108 span {
        font-size: 36px !important
    }

    .size-112 span {
        font-size: 36px !important
    }

    .size-116 span {
        font-size: 36px !important
    }

    .size-120 span {
        font-size: 36px !important
    }

    .size-124 span {
        font-size: 36px !important
    }

    .size-128 span {
        font-size: 36px !important
    }

    .size-132 span {
        font-size: 36px !important
    }

    .size-136 span {
        font-size: 36px !important
    }

    .size-140 span {
        font-size: 36px !important
    }

    .size-144 span {
        font-size: 36px !important
    }

    .size-148 span {
        font-size: 36px !important
    }

    .size-152 span {
        font-size: 36px !important
    }

    .size-156 span {
        font-size: 36px !important
    }

    .size-160 span {
        font-size: 36px !important
    }

    .size-164 span {
        font-size: 36px !important
    }

    .size-168 span {
        font-size: 36px !important
    }

    .size-172 span {
        font-size: 36px !important
    }

    .size-176 span {
        font-size: 36px !important
    }

    .size-180 span {
        font-size: 36px !important
    }

    .size-184 span {
        font-size: 36px !important
    }

    .size-188 span {
        font-size: 36px !important
    }

    .size-192 span {
        font-size: 36px !important
    }

    .size-196 span {
        font-size: 36px !important
    }

    .size-200 span {
        font-size: 36px !important
    }

    .size-204 span {
        font-size: 36px !important
    }

    .size-208 span {
        font-size: 36px !important
    }

    .size-212 span {
        font-size: 36px !important
    }

    .size-216 span {
        font-size: 36px !important
    }

    .size-220 span {
        font-size: 36px !important
    }
}

@media all and (max-width: 1024px) {
    .margin-left-1024-reset {
        margin-left: 0px !important;
    }

    .margin-right-1024-reset {
        margin-right: 0px !important;
    }
}

.letter-spacing-25 {
    letter-spacing: 25px !important
}

.letter-spacing-24 {
    letter-spacing: 24px !important
}

.letter-spacing-23 {
    letter-spacing: 23px !important
}

.letter-spacing-22 {
    letter-spacing: 22px !important
}

.letter-spacing-21 {
    letter-spacing: 21px !important
}

.letter-spacing-20 {
    letter-spacing: 20px !important
}

.letter-spacing-19 {
    letter-spacing: 19px !important
}

.letter-spacing-18 {
    letter-spacing: 18px !important
}

.letter-spacing-17 {
    letter-spacing: 17px !important
}

.letter-spacing-16 {
    letter-spacing: 16px !important
}

.letter-spacing-15 {
    letter-spacing: 15px !important
}

.letter-spacing-14 {
    letter-spacing: 14px !important
}

.letter-spacing-13 {
    letter-spacing: 13px !important
}

.letter-spacing-12 {
    letter-spacing: 12px !important
}

.letter-spacing-11 {
    letter-spacing: 11px !important
}

.letter-spacing-10 {
    letter-spacing: 10px !important
}

.letter-spacing-9 {
    letter-spacing: 9px !important
}

.letter-spacing-8 {
    letter-spacing: 8px !important
}

.letter-spacing-7 {
    letter-spacing: 7px !important
}

.letter-spacing-6 {
    letter-spacing: 6px !important
}

.letter-spacing-5 {
    letter-spacing: 5px !important
}

.letter-spacing-4 {
    letter-spacing: 4px !important
}

.letter-spacing-3 {
    letter-spacing: 3px !important
}

.letter-spacing-2 {
    letter-spacing: 2px !important
}

.letter-spacing-1 {
    letter-spacing: 1px !important
}

@media all and (max-width: 1024px) {
    .letter-spacing-25 {
        letter-spacing: 5px !important
    }

    .letter-spacing-24 {
        letter-spacing: 5px !important
    }

    .letter-spacing-23 {
        letter-spacing: 5px !important
    }

    .letter-spacing-22 {
        letter-spacing: 5px !important
    }

    .letter-spacing-21 {
        letter-spacing: 5px !important
    }

    .letter-spacing-20 {
        letter-spacing: 5px !important
    }

    .letter-spacing-19 {
        letter-spacing: 5px !important
    }

    .letter-spacing-18 {
        letter-spacing: 5px !important
    }

    .letter-spacing-17 {
        letter-spacing: 5px !important
    }

    .letter-spacing-16 {
        letter-spacing: 5px !important
    }

    .letter-spacing-15 {
        letter-spacing: 5px !important
    }

    .letter-spacing-14 {
        letter-spacing: 5px !important
    }

    .letter-spacing-13 {
        letter-spacing: 5px !important
    }

    .letter-spacing-12 {
        letter-spacing: 5px !important
    }

    .letter-spacing-11 {
        letter-spacing: 5px !important
    }

    .letter-spacing-10 {
        letter-spacing: 5px !important
    }

    .letter-spacing-9 {
        letter-spacing: 5px !important
    }

    .letter-spacing-8 {
        letter-spacing: 4px !important
    }

    .letter-spacing-7 {
        letter-spacing: 4px !important
    }

    .letter-spacing-6 {
        letter-spacing: 3px !important
    }

    .letter-spacing-5 {
        letter-spacing: 3px !important
    }
}


/**********************************
    Title Styles
***********************************/

.is-light-text * {
    color: #fff;
}

.is-dark-text * {
    color: #000;
}

/* Style 1 */

.is-title1-96 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.is-title1-80 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.is-title1-64 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.is-title1-48 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.is-title1-32 {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Style 2 */

.is-title2-96 {
    margin-top: 25px;
    margin-bottom: 20px;
}

.is-title2-80 {
    margin-top: 20px;
    margin-bottom: 15px;
}

.is-title2-64 {
    margin-top: 20px;
    margin-bottom: 15px;
}

.is-title2-48 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.is-title2-32 {
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Style 3 */

.is-title3-96 {
    margin-top: 30px;
    margin-bottom: 35px;
    padding: 20px 0;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-title3-80 {
    margin-top: 25px;
    margin-bottom: 33px;
    padding: 20px 0;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-title3-64 {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 18px 0;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-title3-48 {
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 18px 0;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-title3-32 {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px 0;
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-light-text .is-title3-96 {
    border-top: #fff 2px solid;
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title3-80 {
    border-top: #fff 2px solid;
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title3-64 {
    border-top: #fff 2px solid;
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title3-48 {
    border-top: #fff 2px solid;
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title3-32 {
    border-top: #fff 2px solid;
    border-bottom: #fff 2px solid;
}

.is-dark-text .is-title3-96 {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title3-80 {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title3-64 {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title3-48 {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title3-32 {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

/* Style 4 */

.is-title4-96 {
    margin-top: 30px;
    margin-bottom: 35px;
    padding: 20px 30px;
    border: #000 2px solid;
}

.is-title4-80 {
    margin-top: 25px;
    margin-bottom: 33px;
    padding: 20px 30px;
    border: #000 2px solid;
}

.is-title4-64 {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 18px 28px;
    border: #000 2px solid;
}

.is-title4-48 {
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 18px 25px;
    border: #000 2px solid;
}

.is-title4-32 {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px 20px;
    border: #000 2px solid;
}

.is-light-text .is-title4-96 {
    border: #fff 2px solid;
}

.is-light-text .is-title4-80 {
    border: #fff 2px solid;
}

.is-light-text .is-title4-64 {
    border: #fff 2px solid;
}

.is-light-text .is-title4-48 {
    border: #fff 2px solid;
}

.is-light-text .is-title4-32 {
    border: #fff 2px solid;
}

.is-dark-text .is-title4-96 {
    border: #000 2px solid;
}

.is-dark-text .is-title4-80 {
    border: #000 2px solid;
}

.is-dark-text .is-title4-64 {
    border: #000 2px solid;
}

.is-dark-text .is-title4-48 {
    border: #000 2px solid;
}

.is-dark-text .is-title4-32 {
    border: #000 2px solid;
}

/* Style 5 */

.is-title5-96 {
    margin-top: 10px;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: #000 2px solid;
}

.is-title5-80 {
    margin-top: 10px;
    margin-bottom: 33px;
    padding-bottom: 25px;
    border-bottom: #000 2px solid;
}

.is-title5-64 {
    margin-top: 10px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: #000 2px solid;
}

.is-title5-48 {
    margin-top: 10px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: #000 2px solid;
}

.is-title5-32 {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: #000 2px solid;
}

.is-light-text .is-title5-96 {
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title5-80 {
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title5-64 {
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title5-48 {
    border-bottom: #fff 2px solid;
}

.is-light-text .is-title5-32 {
    border-bottom: #fff 2px solid;
}

.is-dark-text .is-title5-96 {
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title5-80 {
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title5-64 {
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title5-48 {
    border-bottom: #000 2px solid;
}

.is-dark-text .is-title5-32 {
    border-bottom: #000 2px solid;
}

/* Extra Title Styles */

.is-title-lite {
    letter-spacing: 3px;
    word-spacing: 5px;
}

.is-title-lite.is-title3-96,
.is-title-lite.is-title4-96,
.is-title-lite.is-title5-96 {
    letter-spacing: 4px;
    word-spacing: 8px;
}

.is-title-lite.is-title3-80,
.is-title-lite.is-title4-80,
.is-title-lite.is-title5-80 {
    letter-spacing: 4px;
    word-spacing: 8px;
}

.is-title-lite.is-title3-64,
.is-title-lite.is-title4-64,
.is-title-lite.is-title5-64 {
    letter-spacing: 4px;
    word-spacing: 8px;
}

.is-title-lite.is-title3-48,
.is-title-lite.is-title4-48,
.is-title-lite.is-title5-48 {
    letter-spacing: 4px;
    word-spacing: 8px;
}

.is-title-lite.is-title3-32,
.is-title-lite.is-title4-32,
.is-title-lite.is-title5-32 {
    letter-spacing: 3px;
    word-spacing: 5px;
}

.is-title-bold {
    font-weight: 800;
}

.is-title-bold.is-title3-96,
.is-title-bold.is-title4-96,
.is-title-bold.is-title5-96 {
    border-width: 4px;
}

.is-title-bold.is-title3-80,
.is-title-bold.is-title4-80,
.is-title-bold.is-title5-80 {
    border-width: 4px;
}

.is-title-bold.is-title3-64,
.is-title-bold.is-title4-64,
.is-title-bold.is-title5-64 {
    border-width: 3px;
}

.is-title-bold.is-title3-48,
.is-title-bold.is-title4-48,
.is-title-bold.is-title5-48 {
    border-width: 3px;
}

.is-title-bold.is-title3-32,
.is-title-bold.is-title4-32,
.is-title-bold.is-title5-32 {
    border-width: 2px;
}


/**********************************
    Into Styles
***********************************/

.is-info1 {
    margin-top: 10px;
    margin-bottom: 0px;
    font-style: italic;
}

.is-info1.size-21 {
    margin-top: 12px;
}

.is-info1.size-24 {
    margin-top: 15px;
}

.is-info2 {
    margin-top: 10px;
    margin-bottom: 0px;
}

.is-info2.size-21 {
    margin-top: 12px;
}

.is-info2.size-24 {
    margin-top: 15px;
}


/**********************************
    Buttons Styles
***********************************/

.is-btn,
a.is-btn {
    padding: 10px 50px;
    font-size: 1rem;
    line-height: 2rem;
    border-radius: 0;
    letter-spacing: 3px;
    display: inline-block;
    margin: 3px 0;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-transition: all 0.16s ease;
    transition: all 0.16s ease;
    text-decoration: none;
    color: #000;
}

.is-btn:hover,
.is-btn:visited,
.is-btn:focus,
a.is-btn:hover,
a.is-btn:visited,
a.is-btn:focus {
    color: initial;
    text-decoration: initial;
    opacity: initial;
}

/* prevent overide */

/* ghost1 default */
.is-btn-ghost1,
a.is-btn-ghost1 {
    color: #000;
    border: 2px solid #111;
}

/* ghost1 light-text */
.is-light-text .is-btn-ghost1,
.is-dark-text .is-light-text .is-btn-ghost1,
.is-light-text a.is-btn-ghost1,
.is-dark-text .is-light-text a.is-btn-ghost1 {
    color: #fff;
    border: 2px solid #fff;
}

/* ghost1 dark-text */
.is-dark-text .is-btn-ghost1,
.is-light-text .is-dark-text .is-btn-ghost1,
.is-dark-text a.is-btn-ghost1,
.is-light-text .is-dark-text a.is-btn-ghost1 {
    color: #000;
    border: 2px solid #111;
}

/* ghost2 default */
.is-btn-ghost2,
a.is-btn-ghost2 {
    color: #000;
    border: 2px solid #dcdcdc;
    background-color: #dcdcdc;
}

/* ghost2 light-text */
.is-light-text .is-btn-ghost2,
.is-dark-text .is-light-text .is-btn-ghost2,
.is-light-text a.is-btn-ghost2,
.is-dark-text .is-light-text a.is-btn-ghost2 {
    color: #000;
    border: 2px solid #f9f9f9;
    background-color: #f9f9f9;
}

/* ghost2 dark-text */
.is-dark-text .is-btn-ghost2,
.is-light-text .is-dark-text .is-btn-ghost2,
.is-dark-text a.is-btn-ghost2,
.is-light-text .is-dark-text a.is-btn-ghost2 {
    color: #000;
    border: 2px solid #d7d7d7;
    background-color: #d7d7d7;
}

.is-btn.is-btn-small,
.is-btn-small {
    padding: 5px 25px;
    font-size: 0.85em;
}

.is-btn.is-upper,
.is-upper {
    text-transform: uppercase;
}

.is-btn.is-rounded-30,
.is-rounded-30 {
    border-radius: 30px;
}

/* backward compatible */
.btn {
    padding: 7px 25px;
    font-size: 1em;
    line-height: 2em;
    border-radius: 5px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-transition: all 0.16s ease;
    transition: all 0.16s ease;
}

.btn.btn-primary {
    color: #ffffff;
    background-color: #08c9b9;
}

.btn.btn-primary:hover {
    color: #ffffff;
    background-color: #07b0a2;
    border-color: #07b0a2;
}

.btn.btn-default {
    color: #333333;
    background-color: #d3d3d3;
}

.btn.btn-default:hover {
    color: #111;
    background-color: #ccc;
    border-color: #ccc;
}

/* ==========================================================================
   FAQ / Programa Lealtad: módulos reutilizables (prefijo faq-)
   ========================================================================== */

:root {
   /*  --faq-teal: #4EBEAE; */
    --faq-teal: #01E3C0;
    --faq-teal-deep: #2E8578;
    --faq-purple: #732991;
    --faq-purple-deep: #4A1A5E;
    --faq-mist: #F5F2F8;
    --faq-ink: #1C1230;
    --faq-r-lg: 28px;
    --faq-r-md: 18px;
    --faq-shadow-card: 0 8px 30px -12px rgba(28, 18, 48, 0.18);
    --faq-shadow-soft: 0 20px 60px -20px rgba(74, 26, 94, 0.35);
}

/* --- faq-sec-head: encabezado de sección con eyebrow ---
   El eyebrow es un <p> (no un <div>): el editor solo reconoce como "elemento"
   individual ciertas etiquetas (h1-h6, p, pre, blockquote, li, img, iframe);
   con <p> queda seleccionable/eliminable por separado del <h2>, sin afectarlo.
   El padding de 6px en .faq-sec-head es el mismo "marco" ya usado en
   .faq-item: dado que este bloque no tiene fondo/borde propio, ese padding
   es imperceptible mientras deja una franja siempre perteneciente al
   contenedor completo, útil para seleccionarlo como bloque si hace falta. */
.faq-sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 6px;
}

.faq-sec-title {
    font-family: "GoldplayBold", sans-serif;
    color: var(--faq-ink);
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 10px;
}

.faq-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "GoldplaySemiBold", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    /* color: var(--faq-teal-deep); */
    color: #01E3C0;
}

.faq-eyebrow::before,
.faq-eyebrow::after {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--faq-teal);
}

/* --- faq-about-card: card ícono + título + descripción --- */
.faq-about-card {
    position: relative;
    background: #ffffff;
    border-radius: var(--faq-r-lg);
    padding: 32px;
    box-shadow: var(--faq-shadow-card);
    border: 1px solid rgba(115, 41, 145, 0.06);
    overflow: hidden;
    transition: box-shadow 0.35s ease;
    margin-bottom: 24px;
}

.faq-about-card:hover {
    box-shadow: var(--faq-shadow-soft);
}

/* faq-about-row: variante que trae las 2 cards ya lado a lado en un solo
   arrastre (no depende de que el usuario arme una fila de 2 columnas del
   editor a mano). Usa flex propio, no el grid "row/column" del editor. */
.faq-about-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.faq-about-row .faq-about-card {
    flex: 1 1 280px;
    margin-bottom: 0;
}

.faq-about-card-topbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    /* background: linear-gradient(90deg, var(--faq-teal), var(--faq-purple)); */
    background: linear-gradient(90deg, #01e3c0, #652D90);
}

.faq-about-card .faq-ac-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(78, 190, 174, 0.16), rgba(115, 41, 145, 0.12));
    /* background: linear-gradient(135deg, #01e3c0, #652D90); */
}

.faq-about-card .faq-ac-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.faq-about-card .faq-ac-icon-token {
    background: none;
    perspective: 400px;
}

.faq-about-card .faq-ac-icon-token img {
    width: 40px;
    filter: drop-shadow(0 6px 12px rgba(78, 190, 174, 0.4));
}

/* Antes esta animación se activaba sola con el hover de toda la card
   (.faq-about-card:hover), sin que el usuario pudiera quitarla si no la
   quería. Ahora es una clase predefinida, opt-in: el usuario la escribe a
   mano en el cuadro "Class" del panel css avanzado (sobre la imagen del
   ícono) solo si quiere ese efecto — igual que .faq-no-title-hover más
   abajo en este archivo. No viene puesta por defecto en ningún snippet. */
.faq-hover-coinsway:hover {
    animation: coinSway 3s ease-in-out infinite;
}

/* coinSway: balanceo 3D reutilizado por faq-ac-icon-token (hover) y faq-req-tok */
@keyframes coinSway {
    0% {
        transform: rotateY(-30deg);
    }

    50% {
        transform: rotateY(30deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

.faq-about-card h3 {
    font-family: "GoldplayBold", sans-serif;
    color: var(--faq-ink);
    font-size: 1.3rem;
    margin: 0 0 10px;
}

.faq-about-card p {
    font-family: "GoldplayRegular", sans-serif;
    color: #5A4E6B;
    font-size: 1rem;
    margin: 0;
}

/* --- faq-req-card: card CTA con check + número gigante ---
   El editor agrega la clase "elm-active" a la tarjeta completa cuando se
   selecciona (porque sus <div> internos no son "elemento" reconocido), y la
   regla del vendor ".cell-active .elm-active { background: rgba(200,200,201,.11) }"
   (contentbuilder.css) gana por especificidad y tapa el degradado morado con
   gris casi blanco. La regla de abajo (mayor especificidad, sin !important)
   reafirma el degradado cuando conviven ambas clases. */
/* max-width + margin: 0 auto replican .req-card de la referencia (línea 489):
   sin esto la card ocupaba todo el ancho del editor en vez de quedar centrada
   y con un ancho tope, como en programa-lealtad-Agosto.html. */
.faq-req-card {
    position: relative;
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto 24px;
    border-radius: var(--faq-r-lg);
    padding: 40px;
    /* background: radial-gradient(130% 130% at 88% 8%, #8A34AE 0%, var(--faq-purple) 42%, var(--faq-purple-deep) 100%); */
    background: radial-gradient(130% 130% at 88% 8%, #01E3C0 0%, #652D90 42%, var(--faq-purple-deep) 100%);
    box-shadow: 0 30px 70px -28px rgba(74, 26, 94, 0.75);
}

.cell-active .elm-active.faq-req-card {
    background: radial-gradient(130% 130% at 88% 8%, #8A34AE 0%, var(--faq-purple) 42%, var(--faq-purple-deep) 100%);
}

/* .faq-req-bignum es un <h6> para que el editor lo reconozca como
   "elemento" propio, pero es puramente decorativo (un "1" gigante casi
   transparente) y su caja ocupa gran parte del lado derecho de la card —
   sin pointer-events:none, cualquier clic ahí (incluso en el aire alrededor
   del trazo del número) lo seleccionaba a ÉL en vez de a .faq-req-card,
   hacía casi imposible seleccionar la card completa (para cambiarle fondo/
   ancho/etc. — ver .faq-req-card is-subblock más abajo). Se prioriza poder
   seleccionar la card por encima de poder seleccionar el número suelto. */
.faq-req-bignum {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    font-family: "GoldplayBold", sans-serif;
    font-size: clamp(8rem, 18vw, 14rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(139, 235, 220, 0.28);
}

/* .faq-req-item marcado is-subblock/data-subblock: vuelve a .faq-req-check
   y .faq-req-text cada uno seleccionable/eliminable como bloque propio
   (mismo mecanismo ya usado en .faq-item-a). */
.faq-req-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    z-index: 3;
}

.faq-req-check {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--faq-teal), var(--faq-teal-deep));
    box-shadow: 0 16px 34px -10px rgba(78, 190, 174, 0.8);
}

.faq-req-check img:not(.faq-req-tok) {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Token/moneda animada superpuesta en la esquina del ícono de check */
.faq-req-tok {
    position: absolute;
    width: 28px;
    bottom: -8px;
    right: -8px;
    perspective: 400px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    backface-visibility: hidden;
    animation: coinSway 4.5s ease-in-out infinite;
}

.faq-req-tag {
    display: inline-block;
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* color: #8BEBDC; */
    color: #01E3C0;

    background: rgba(78, 190, 174, 0.18);
    border: 1px solid rgba(78, 190, 174, 0.4);
    padding: 6px 13px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.faq-req-text h4 {
    font-family: "GoldplayBold", sans-serif;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    margin: 0 0 8px;
}

.faq-req-text p {
    font-family: "GoldplayRegular", sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    max-width: 560px;
    margin: 0;
}

@media (max-width: 680px) {
    .faq-req-card {
        padding: 28px;
    }

    .faq-req-item {
        flex-direction: column;
    }

    .faq-req-bignum {
        font-size: 6rem;
        right: 4%;
        top: 14%;
        transform: none;
    }
}

/* --- faq-item: acordeón de pregunta/respuesta (Centro de ayuda) ---
   Se implementa con <div> (no <details>/<summary>): un <details> nativo dentro
   de la región contentEditable del editor deja de responder al clic de abrir/
   cerrar en la mayoría de navegadores (el navegador prioriza colocar el cursor
   de edición sobre el toggle nativo). El abrir/cerrar lo controla JS alternando
   la clase "open" — en público, clic en toda la fila (PreguntasFrecuentes.jsx /
   BuscadorFAQ); en el editor admin, clic solo en el círculo de la flecha
   (ContentBuilderEditor.jsx), para no interferir con el clic normal de editar
   el texto del título. Los bloques nuevos arrancan con "open" para que el autor
   vea la respuesta de inmediato al arrastrar el snippet.

   Personalización avanzada (opcional): el panel visual del editor no puede
   condicionar un estilo a "cuando está abierto" (no maneja estados), así que
   los colores de la flecha en cada estado se expusieron como variables CSS con
   su valor por defecto: --faq-item-chev-bg / --faq-item-chev-color (cerrado) y
   --faq-item-chev-bg-open / --faq-item-chev-color-open (abierto), más
   --faq-item-open-border / --faq-item-open-shadow para el borde/sombra de toda
   la tarjeta al abrir. Para cambiarlas: seleccionar la tarjeta ".faq-item"
   completa (no un subelemento) → "..." → Settings → botón "css" → escribir p.ej.
   "--faq-item-chev-bg-open: #ff0000;" en Style — las variables CSS heredan
   hacia los hijos, así que no hace falta seleccionar la flecha en sí. */
.faq-item {
    background: #ffffff;
    border: 1px solid rgba(115, 41, 145, 0.1);
    border-radius: var(--faq-r-md);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 10px;
    /* Este padding (restado del padding de .faq-item-q/.faq-item-a más abajo,
       para que el diseño se vea idéntico) deja un margen delgado que siempre
       pertenece a la tarjeta y no a sus hijos — así hacer clic cerca del borde
       selecciona ".faq-item" completa de forma confiable, en vez de caer casi
       siempre en el encabezado o la respuesta. */
    padding: 6px;
}

.faq-item.open {
    border-color: var(--faq-item-open-border, var(--faq-teal));
    box-shadow: var(--faq-item-open-shadow, 0 12px 30px -14px rgba(78, 190, 174, 0.45));
}

.faq-item-q {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 1rem;
    color: var(--faq-ink);
    transition: color 0.25s ease;
}

/* .faq-item-q-text es un <h4> (no un <div>) a propósito: el editor solo
   reconoce como "elemento" individual ciertas etiquetas (encabezados, párrafos,
   imágenes...); un <div> genérico no calificaba, así que al seleccionar el
   título el editor terminaba subiendo hasta la tarjeta completa ".faq-item" —
   aplicando cualquier estilo/animación también al ícono. Como <h4> sí es
   reconocido, ahora se selecciona de forma aislada. Este reset solo anula el
   margen/tamaño por defecto del navegador para que se vea igual que antes. */
.faq-item-q-text {
    margin: 0;
    font: inherit;
    /* color: inherit; */
    color: #0d3b47;
}

/* Antes esta regla ponía el color en .faq-item-q (el contenedor), y
   .faq-item-q-text lo heredaba con color:inherit — funcionaba mientras el
   título no tuviera un color propio. Al fijarle #0d3b47 arriba, un valor
   explícito en un elemento siempre gana sobre lo heredado del padre
   (pase lo que pase con el padre), así que el hover dejó de "verse". El
   fix es apuntar el hover directo al título, no al contenedor. */
.faq-item-q:hover .faq-item-q-text {
    /* color: var(--faq-teal-deep); */
    color: #01e3c0;
}

/* Clase opcional para desactivar el hover del título del acordeón desde el
   editor: seleccionar la tarjeta ".faq-item" completa (no un subelemento) →
   Settings → botón "css" → agregar "faq-no-title-hover" en el cuadro Class.
   Tres clases + :hover le gana en especificidad a la regla de arriba, sin
   necesitar !important. */
.faq-item.faq-no-title-hover .faq-item-q:hover .faq-item-q-text {
    color: #0d3b47;
}

.faq-item-chev {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--faq-item-chev-bg, rgba(78, 190, 174, 0.14));
    color: var(--faq-item-chev-color, var(--faq-teal-deep));
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.faq-item-chev svg {
    width: 15px;
    height: 15px;
}

.faq-item.open .faq-item-chev {
    transform: rotate(180deg);
    background: var(--faq-item-chev-bg-open, var(--faq-teal));
    color: var(--faq-item-chev-color-open, #ffffff);
}

.faq-item-a {
    display: none;
    padding: 0 16px 14px;
    color: #5A4E6B;
    font-family: "GoldplayRegular", sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
}

.faq-item.open .faq-item-a {
    display: block;
}

.faq-item-a a {
    color: var(--faq-purple);
    font-weight: 600;
    text-decoration: underline;
}

.faq-item-hit {
    animation: faqItemHit 1.6s ease;
}

@keyframes faqItemHit {

    0%,
    100% {
        background: #ffffff;
    }

    30% {
        background: rgba(78, 190, 174, 0.12);
    }
}

@media (max-width: 680px) {
    .faq-item-q {
        padding: 9px 10px;
        font-size: 0.94rem;
    }

    .faq-item-a {
        padding: 0 10px 10px;
        font-size: 0.92rem;
    }
}

/* ==========================================================
   FASE B — "Conoce el Programa"
   4 módulos nuevos: faq-cycle-card, faq-acumula-card, y los
   snippets pequeños reutilizables faq-cat-tile / faq-app-card
   (usados a mano por el usuario dentro de las cards de
   "Redime"/"Acceso", armadas con las herramientas del editor).
   ========================================================== */

/* ---------- CICLO (faq-cycle-card) ---------- */
.faq-cycle-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--faq-r-lg);
    padding: 44px;
    /* background: radial-gradient(130% 130% at 50% -10%, #3A1450 0%, #2A0F38 55%, #1E0B2A 100%);
    box-shadow: 0 30px 70px -28px rgba(42, 15, 56, 0.8); */

     background: radial-gradient(130% 130% at 50% -10%, #01E3C0 0%, #652D90 55%, #1E0B2A 100%) !important;
     box-shadow: 0 30px 70px -28px #01E3C0 !important;

}

/* Mismo bug de especificidad que .faq-req-card (ver nota más abajo en este
   archivo): al seleccionar la card completa, el vendor le agrega "elm-active"
   y su regla ".cell-active .elm-active { background: rgba(200,200,201,.11) }"
   tapa el degradado con gris casi blanco. Se reafirma aquí sin !important. */
.cell-active .elm-active.faq-cycle-card {
    background: radial-gradient(130% 130% at 50% -10%, #3A1450 0%, #2A0F38 55%, #1E0B2A 100%);
}

.faq-cycle-head {
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
}

.faq-cycle-head h3 {
    color: #ffffff;
    font-family: "GoldplayBold", sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 800;
    margin: 0;
}

.faq-cycle-head p {
    color: rgba(255, 255, 255, 0.75);
    margin-top: 6px;
    font-size: 1rem;
}

.faq-cycle-hl {
    /* color: #8BEBDC; */
    color: #01E3C0;
    font-weight: 700;
}

.faq-cycle-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 18px 26px;
    align-items: center;
    z-index: 2;
}

.faq-cyc-arrow {
    position: absolute;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 235, 220, 0.14);
    border: 1px solid rgba(139, 235, 220, 0.4);
    /* color: #8BEBDC; */
    color: #01E3C0;
    transition: 0.5s;
}

.faq-cyc-arrow svg {
    width: 16px;
    height: 16px;
}

/* Cada flecha se ancla a la esquina exterior de la card hacia la que apunta
   (no al punto medio entre dos cards, como en la referencia original). */
.faq-cyc-arrow.a1 {
    top: -6px;
    right: -6px;
}

.faq-cyc-arrow.a2 {
    bottom: -6px;
    right: -6px;
    transform: rotate(90deg);
}

.faq-cyc-arrow.a3 {
    bottom: -6px;
    left: -6px;
    transform: rotate(180deg);
}

.faq-cyc-arrow.a4 {
    top: -6px;
    left: -6px;
    transform: rotate(270deg);
}

.faq-cyc-arrow.on {
    background: var(--faq-teal);
    color: var(--faq-purple-deep);
    border-color: var(--faq-teal);
    box-shadow: 0 0 18px rgba(78, 190, 174, 0.7);
}

.faq-cycle-center {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.faq-cc-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 190, 174, 0.4), transparent 65%);
    filter: blur(22px);
    animation: faqCyclePulseHalo 4s ease-in-out infinite;
}

.faq-cc-spark {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    border: 2px solid rgba(139, 235, 220, 0.5);
    opacity: 0;
    animation: faqSparkOut 2.6s ease-out infinite;
}

.faq-cc-spark.s2 {
    animation-delay: 1.3s;
}

@keyframes faqSparkOut {
    0% {
        transform: scale(0.82);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

@keyframes faqCyclePulseHalo {

    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.95;
    }
}

.faq-cc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(139, 235, 220, 0.4);
    animation: faqCycleSpin 24s linear infinite;
}

.faq-cc-ring.r2 {
    inset: 24px;
    border-color: rgba(255, 255, 255, 0.2);
    animation-duration: 14s;
    animation-direction: reverse;
}

@keyframes faqCycleSpin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.faq-cycle-center::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50%;
    height: 14px;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%);
    filter: blur(8px);
    animation: faqCycleShadowPulse 5s ease-in-out infinite;
}

@keyframes faqCycleShadowPulse {

    0%,
    100% {
        opacity: 0.5;
        width: 50%;
    }

    50% {
        opacity: 0.35;
        width: 44%;
    }
}

.faq-cc-coin {
    position: relative;
    z-index: 2;
    display: flex;
    animation: faqCycleBobFloat 4.5s ease-in-out infinite;
}

.faq-cc-coin img {
    width: 118px;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}

@keyframes faqCycleBobFloat {

    0%,
    100% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(6px);
    }
}

.faq-cycle-step {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--faq-r-md);
    padding: 18px 18px 18px 56px;
    transition: 0.5s;
    min-height: 92px;
}

.faq-cs-num {
    position: absolute;
    top: 16px;
    left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(78, 190, 174, 0.2);
    border: 1.5px solid var(--faq-teal);
    /* color: #8BEBDC; */
    color: #01E3C0;
    font-family: "GoldplayBold", sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    margin: 0;
}

.faq-cycle-step h4 {
    color: #ffffff;
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 1.05rem;
    margin-bottom: 5px;
    transition: 0.5s;
}

.faq-cycle-step p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.86rem;
    line-height: 1.45;
    transition: 0.5s;
    margin: 0;
}

.faq-cycle-step.on {
    background: rgba(78, 190, 174, 0.13);
    border-color: var(--faq-teal);
    box-shadow: 0 14px 36px -14px rgba(78, 190, 174, 0.55);
    transform: translateY(-4px);
}

.faq-cycle-step.on .faq-cs-num {
    background: var(--faq-teal);
    color: var(--faq-purple-deep);
    box-shadow: 0 0 18px rgba(78, 190, 174, 0.8);
}

.faq-cycle-step.on h4 {
    /* color: #8BEBDC; */
    color: #01E3C0;
}

.faq-cycle-step.on p {
    color: rgba(255, 255, 255, 0.85);
}

.faq-cycle-tagline {
    margin-top: 26px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.faq-cycle-tagline span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px;
    border-radius: 100px;
}

.faq-cycle-tagline strong {
    /* color: #8BEBDC; */
    color: #01E3C0;
}

.faq-cycle-next {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 16px;
    font-family: "GoldplayMedium", sans-serif;
    font-weight: 500;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .faq-cycle-card {
        padding: 26px 18px;
    }

    .faq-cycle-head {
        margin-bottom: 18px;
    }

    .faq-cycle-head h3 {
        font-size: 1.35rem;
    }

    .faq-cycle-head p {
        font-size: 0.9rem;
    }

    .faq-cycle-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 10px;
        align-items: stretch;
    }

    .faq-cycle-center {
        grid-area: 2 / 1 / 3 / 3;
        width: 126px;
        height: 126px;
        margin: 4px auto;
    }

    .faq-cc-coin img {
        width: 80px;
    }

    .faq-cycle-step[data-step="0"] {
        grid-area: 1 / 1 / 2 / 2;
    }

    .faq-cycle-step[data-step="1"] {
        grid-area: 1 / 2 / 2 / 3;
    }

    .faq-cycle-step[data-step="2"] {
        grid-area: 3 / 2 / 4 / 3;
    }

    .faq-cycle-step[data-step="3"] {
        grid-area: 3 / 1 / 4 / 2;
    }

    .faq-cycle-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 12px;
        text-align: center;
        min-height: 0;
        align-self: stretch;
    }

    .faq-cs-num {
        position: static;
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .faq-cycle-step.on {
        transform: none;
    }

    .faq-cycle-step h4 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .faq-cycle-step p {
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .faq-cycle-tagline {
        margin-top: 20px;
    }

    .faq-cycle-tagline span {
        font-size: 0.82rem;
        padding: 10px 16px;
        text-align: center;
    }
}

/* ---------- ACUMULA (faq-acumula-card) ---------- */
.faq-acumula-card {
    position: relative;
    overflow: visible;
    background: #ffffff;
    padding: 44px;
    border-radius: var(--faq-r-lg);
    box-shadow: var(--faq-shadow-card);
    border: 1px solid rgba(78, 190, 174, 0.15);
}

.cell-active .elm-active.faq-acumula-card {
    background: #ffffff;
}

.faq-acumula-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--faq-teal), var(--faq-teal-deep));
    border-radius: var(--faq-r-lg) var(--faq-r-lg) 0 0;
}

.faq-mv-acc-head {
    text-align: center;
}

.faq-mv-acc-head h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--faq-ink);
    font-weight: 800;
    margin: 0;
}

.faq-acum-flow {
    position: relative;
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
}

.faq-acum-line {
    /* color: #5A4E6B; */
    color: #01E3C0;
    font-size: 1.12rem;
    font-family: "GoldplayMedium", sans-serif;
    font-weight: 500;
    margin: 0 0 14px;
}

.faq-acum-line strong {
    /* color: var(--faq-teal-deep); */
    color: #01E3C0;
    font-weight: 700;
}

.faq-acum-close {
    margin: 26px auto 0;
    padding-top: 20px;
    border-top: 1.5px dashed rgba(78, 190, 174, 0.35);
    font-size: 1.14rem;
    color: var(--faq-ink);
    font-family: "GoldplayMedium", sans-serif;
    font-weight: 600;
    max-width: 600px;
}

.faq-acum-hl {
    /* color: var(--faq-teal-deep); */
    color: #01E3C0;
    font-weight: 800;
}

.faq-reto-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 18px 0;
}

.faq-reto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 16px;
    border-radius: var(--faq-r-md);
    background: var(--faq-mist);
    border: 1.5px solid rgba(78, 190, 174, 0.2);
    transition: 0.5s;
    text-align: center;
}

.faq-reto-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 190, 174, 0.14);
    transition: 0.5s;
}

.faq-reto-ic img {
    width: 26px;
    height: 26px;
    transition: 0.5s;
}

.faq-reto-lbl {
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--faq-ink);
    margin: 0;
}

.faq-plus-logo {
    height: 1.5em;
    width: auto;
    margin-left: 5px;
    filter: brightness(0) invert(1);
}

.faq-reto-plus {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, 8px);
    display: inline-flex;
    align-items: center;
    gap: 1px;
    width: max-content;
    font-family: "GoldplayBold", sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #ffffff;
    background: var(--faq-teal);
    padding: 6px 15px;
    border-radius: 100px;
    opacity: 0;
    transition: 0.5s;
    box-shadow: 0 10px 22px -6px rgba(78, 190, 174, 0.9);
    white-space: nowrap;
    height: 36px;
}

.faq-reto:hover {
    background: #ffffff;
    border-color: var(--faq-teal);
    transform: translateY(-6px);
    box-shadow: 0 18px 38px -14px rgba(78, 190, 174, 0.55);
}

.faq-reto:hover .faq-reto-ic {
    background: linear-gradient(135deg, var(--faq-teal), var(--faq-teal-deep));
}

.faq-reto:hover .faq-reto-ic img {
    filter: brightness(0) invert(1);
}

.faq-reto:hover .faq-reto-plus {
    opacity: 1;
    transform: translate(-50%, 0);
}

.faq-mv-seal {
    position: absolute;
    bottom: -26px;
    right: -26px;
    width: 160px;
    z-index: 5;
    border-radius: 18px;
    transform: rotate(-6deg);
    box-shadow: 0 22px 46px -14px rgba(74, 26, 94, 0.55);
    border: 5px solid #ffffff;
    background: #ffffff;
    /* animation: faqSealFloat 5.5s ease-in-out infinite;
    transition: 0.4s; */
}


/* Estilo quemado para animacion boton flotante módulo: "¿Cómo acumulo Pinos?"*/

 .hover-faq-mv-seal:hover{ 
    animation: faqSealFloat 6s ease-in-out infinite;
    transition: 0.6s; 
    }

/* .faq-acumula-card:hover .faq-mv-seal {
    transform: rotate(-2deg) scale(1.06);
}
 */


@keyframes faqSealFloat {

    0%,
    100% {
        transform: rotate(-6deg) translateY(-5px);
    }

    50% {
        transform: rotate(-3deg) translateY(5px);
    }
}

@media (max-width: 820px) {
    .faq-acumula-card {
        padding: 32px 26px;
    }

    .faq-mv-seal {
        width: 118px;
        bottom: -18px;
        right: -14px;
    }
}

@media (max-width: 680px) {
    .faq-acumula-card {
        padding: 28px 20px;
    }

    .faq-reto-strip {
        gap: 8px;
        margin: 14px 0;
    }

    .faq-acum-line {
        font-size: 0.98rem;
        margin-bottom: 0;
    }

    .faq-acum-close {
        font-size: 0.98rem;
        margin-top: 18px;
        padding-top: 14px;
    }

    .faq-reto {
        padding: 14px 6px;
        gap: 7px;
    }

    .faq-reto-ic {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .faq-reto-ic img {
        width: 20px;
        height: 20px;
    }

    .faq-reto-lbl {
        font-size: 0.76rem;
    }

    .faq-reto-plus {
        font-size: 0.78rem;
        padding: 5px 11px;
        top: -13px;
    }

    .faq-plus-logo {
        height: 1.35em;
        margin-left: 4px;
    }

    .faq-mv-seal {
        position: static;
        width: 150px;
        margin: 22px auto 0;
        border-width: 4px;
        border-radius: 14px;
        /* transform: rotate(-3deg); */
        box-shadow: 0 14px 32px -10px rgba(74, 26, 94, 0.5);
    }
}

/* ---------- CATEGORÍA DE REDENCIÓN (faq-cat-tile) — snippet pequeño
   reutilizable: se arrastra varias veces dentro de un contenedor que el
   usuario arma a mano en el editor (fondo degradado morado tipo "Redime",
   fila/columnas con display:flex + flex-wrap desde el panel del editor). */
.faq-cat-tile {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 600;
    /* font-size: 0.78rem; */
    font-size: 8px !important;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 9px 12px 9px 8px;
    border-radius: 100px;
    transition: 0.3s;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

.faq-cat-tile:hover {
    background: rgba(78, 190, 174, 0.18);
    border-color: var(--faq-teal);
    transform: translateY(-3px);
}

.faq-cat-tile p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-ct-ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(78, 190, 174, 0.35), rgba(139, 235, 220, 0.15));
}

.faq-ct-ic img {
    display: block;
    width: 15px;
    height: 15px;
    margin: auto;
    object-fit: contain;
}

/* ---------- TARJETA DE APP (faq-app-card) — snippet pequeño reutilizable:
   pensado para vivir sobre un fondo degradado teal tipo "Acceso", armado
   a mano por el usuario con el panel Background del editor. */
.faq-app-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--faq-r-md);
    padding: 14px 18px;
    transition: 0.35s;
}

.faq-app-card:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.2);
}

.faq-apc-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
}

.faq-apc-ic img {
    width: 22px;
    height: 22px;
    margin: 0 !important;
}

.faq-app-card h4 {
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 1rem;
    color: #ffffff;
    margin: 0 0 2px;
}

.faq-app-card p {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    margin: 0;
}

/* ==========================================================
   faq-redime-card / faq-access-card
   A diferencia de faq-cat-tile/faq-app-card (pensados para vivir dentro
   de un contenedor armado a mano), el editor de ContentBuilder SOLO acepta
   arrastrar snippets nuevos dentro de un <div class="column">: es el único
   elemento que el vendor inicializa como zona "Sortable" (confirmado en
   contentbuilder.min.js). Por eso estas dos cards se entregan completas
   (fondo, textos, layout) con una columna real ya integrada adentro
   (.faq-catgrid / .faq-appcards) para que ahí sí se puedan soltar los
   snippets faq-cat-tile / faq-app-card, tal como en la referencia. */
.faq-redime-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--faq-r-lg);
    padding: 48px 44px 40px;
    /* background: radial-gradient(130% 140% at 85% -10%, #8A34AE 0%, var(--faq-purple) 40%, var(--faq-purple-deep) 100%); */
    /* box-shadow: 0 30px 70px -28px rgba(74, 26, 94, 0.75); */

    background: radial-gradient(130% 140% at 85% -10%, #01E3C0 0%, #652D90 40%, var(--faq-purple-deep) 100%);
    box-shadow: 0 30px 70px -28px rgba(74, 26, 94, 0.75);

    margin-bottom: 24px;
}

.cell-active .elm-active.faq-redime-card {
    background: radial-gradient(130% 140% at 85% -10%, #8A34AE 0%, var(--faq-purple) 40%, var(--faq-purple-deep) 100%);
}

.faq-redime-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 190, 174, 0.4), transparent 68%);
    top: -130px;
    right: -80px;
    filter: blur(22px);
    pointer-events: none;
    animation: faqRedimePulse 5s ease-in-out infinite;
}

.faq-redime-glow.g2 {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
    bottom: -150px;
    left: -100px;
    top: auto;
    right: auto;
    width: 300px;
    height: 300px;
    animation-duration: 7s;
}

@keyframes faqRedimePulse {

    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.95;
    }
}

.faq-redime-head {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

.faq-redime-head h3 {
    color: #ffffff;
    font-family: "GoldplayBold", sans-serif;
    font-size: clamp(1.6rem, 2.7vw, 2.2rem);
    font-weight: 800;
    margin: 0;
}

.faq-redime-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    align-items: start;
}

.faq-redime-count {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.faq-redime-count strong {
    font-family: "GoldplayBold", sans-serif;
    font-weight: 800;
    font-size: clamp(3.6rem, 8vw, 6.5rem);
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 0.9;
    text-shadow: 0 10px 40px rgba(255, 255, 255, 0.25);
}

.faq-redime-count span {
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 8px;
    display: block;
}

.faq-cat-kicker {
    margin: 0 0 14px;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* color: #8BEBDC; */
    color: #01E3C0;
}

/* .faq-catgrid ES la columna real donde se sueltan los faq-cat-tile
   (ver nota arriba); se le quita el padding propio de .column para que
   no rompa el ritmo visual dentro de la card. */
.faq-catgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0;
    min-height: 46px;
}

/* Dentro de faq-catgrid las tiles ocupan todo su ancho de columna (mismo
   tamaño entre sí, como en la referencia) en vez de encogerse al ancho de
   su propio texto (que es lo que hacían como snippet suelto/flex). */
.faq-catgrid .faq-cat-tile {
    width: 100%;
}

.faq-redime-foot {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.faq-redime-foot p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
    max-width: 560px;
}

.faq-redime-foot p strong {
    /* color: #8BEBDC; */
    color: #01E3C0;
}

/* Botón agregado a mano en el snippet (no por drag-and-drop, ver nota más
   arriba): mismos estilos que .flow-link/.flow-cta de la referencia,
   quemados en esta clase para reutilizarlos igual que .faq-cat-tile. */
.faq-flow-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--faq-purple-deep);
    background: var(--faq-teal);
    padding: 13px 26px;
    border-radius: 100px;
    transition: 0.3s;
    box-shadow: 0 14px 32px -10px rgba(78, 190, 174, 0.8);
    text-decoration: none;
    height: 55px;
}

.faq-flow-cta:hover{
    text-decoration: none !important;
    color: #4A1A5E !important;
}



/* Igual que .faq-hover-coinsway: no viene aplicado por defecto en el
   snippet. Para activarlo, seleccionar el botón "Ver cómo ingresar" →
   Settings → css → escribir "faq-hover-flowcta" en el cuadro Class. */
.faq-hover-flowcta:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -10px rgba(78, 190, 174, 1);
    text-decoration: none !important;
    color: #4A1A5E !important;
}

@media (max-width: 820px) {
    .faq-redime-card {
        padding: 36px 24px 30px;
    }

    .faq-redime-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .faq-cat-kicker {
        text-align: center;
    }

    .faq-catgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- faq-access-card ---------- */
.faq-access-card {
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(125deg, var(--faq-teal), var(--faq-teal-deep)); */
    background: linear-gradient(125deg, #23E18F,#4EBEAE);
    border-radius: var(--faq-r-lg);
    padding: 44px 48px;
    color: #ffffff;
    box-shadow: var(--faq-shadow-soft);
    margin-bottom: 24px;
}

.cell-active .elm-active.faq-access-card {
    background: linear-gradient(125deg, var(--faq-teal), var(--faq-teal-deep));
}

.faq-access-card::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: -120px;
    right: -80px;
    pointer-events: none;
}

.faq-access-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: center;
}

.faq-access-left h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    margin: 0 0 8px;
    color: #ffffff;
    font-family: "GoldplayBold", sans-serif;
}

.faq-access-sub {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 1rem;
    margin: 0 0 26px;
}

.faq-app-power-kick {
    display: block;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 14px;
}

/* .faq-appcards ES la columna real donde se sueltan los faq-app-card. */
.faq-appcards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    min-height: 46px;
}

.faq-access-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.faq-qr-box {
    background: #ffffff;
    border-radius: var(--faq-r-lg);
    padding: 20px;
    text-align: center;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
    max-width: 230px;
    width: 100%;
}

.faq-qr-frame {
    position: relative;
    padding: 11px;
    border-radius: var(--faq-r-md);
    margin: 0 auto 10px;
    background: linear-gradient(135deg, var(--faq-teal), var(--faq-purple));
}

.faq-qr-frame img {
    width: 100%;
    border-radius: 10px;
    background: #ffffff;
    display: block;
}

.faq-qr-caption {
    color: var(--faq-purple);
    font-weight: 700;
    font-size: 0.88rem;
    font-family: "GoldplaySemiBold", sans-serif;
    margin: 0;
}

.faq-access-how {
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.faq-access-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.faq-access-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #ffffff;
}

.faq-as-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--faq-teal-deep);
    font-family: "GoldplayBold", sans-serif;
    font-weight: 800;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    margin: 0;
}

.faq-access-step p {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
    padding-top: 3px;
}

.faq-access-step p strong {
    font-family: "GoldplaySemiBold", sans-serif;
    font-size: 0.98rem;
}

.faq-btn-wpp {
    background: #ffffff;
    color: var(--faq-teal-deep);
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    transition: 0.25s;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 300px;
    text-decoration: none;
}

.faq-btn-wpp:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--faq-teal-deep) !important;
}

.faq-btn-wpp img {
    width: 22px;
    height: 22px;
    margin: 0 !important;
}

/* ==========================================================
   faq-media-grid — módulo custom (data-module="media-grid"), panel de
   ajustes en public/ContentBuilder/assets/modules/media-grid.html.
   Estilo neutro (fondo claro) a propósito: es un bloque suelto que el
   usuario arrastra donde quiera, no vive fijo dentro de una card con fondo
   propio como faq-redime-card/faq-access-card. */
.faq-mg-grid {
    display: grid;
    grid-template-columns: repeat(var(--faq-mg-cols, 3), 1fr);
    gap: var(--faq-mg-gap, 16px);
}

.faq-mg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 14px;
    border-radius: var(--faq-r-md);
    background: rgba(13, 59, 71, 0.04);
    border: 1px solid rgba(13, 59, 71, 0.08);
    transition: 0.3s;
}

.faq-mg-item:hover {
    transform: translateY(-3px);
    background: rgba(78, 190, 174, 0.1);
    border-color: var(--faq-teal);
}

.faq-mg-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(78, 190, 174, 0.35), rgba(139, 235, 220, 0.35));
}

.faq-mg-ic img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.faq-mg-item p {
    margin: 0;
    font-family: "GoldplaySemiBold", sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: #0d3b47;
}

.faq-mg-desc {
    font-family: "GoldplayRegular", sans-serif;
    font-size: 0.82rem;
    color: rgba(13, 59, 71, 0.7);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .faq-mg-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 420px) {
    .faq-mg-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 820px) {
    .faq-access-card {
        padding: 34px 26px;
    }

    .faq-access-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-access-left {
        text-align: center;
    }

    .faq-app-power-kick {
        text-align: center;
    }
}

/* ==========================================================
   mv-connector / fc-orb — conector circular animado entre secciones,
   idéntico a .mv-connector/.fc-orb del HTML de referencia (línea 372-377
   de programa-lealtad-Agosto.html): un snippet suelto, se arrastra entre
   dos módulos para separarlos visualmente con una flechita que "respira".
   Mismos selectores que la referencia, salvo que el ícono es <img> (SVG
   en data-URI) en vez de <svg> inline — así "Change Image" funciona para
   reemplazarlo. Por eso el color del trazo va quemado en el propio SVG:
   currentColor (lo que usaba la referencia) no atraviesa una imagen
   cargada por src. */
.mv-connector {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.fc-orb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--faq-shadow-card);
    border: 2px solid var(--faq-teal);
}

.cell-active .elm-active.fc-orb {
    background: #ffffff;
}

.fc-orb img {
    width: 23px;
    height: 23px;
    transform: rotate(90deg);
    animation: fcOrbNudge 1.6s ease-in-out infinite;
}

@keyframes fcOrbNudge {

    0%,
    100% {
        translate: 0 -3px;
    }

    50% {
        translate: 0 3px;
    }
}

/* Clase quemada para quitar la animación sin tocar CSS: se agrega
   "fc-orb-static" en el cuadro Class (botón "css" del panel de Settings)
   del círculo .fc-orb. */
.fc-orb.fc-orb-static img {
    animation: none;
}