:root {
  --primary: #cc4fa3;
  --secondary: #1c51cd;
  --cyan: #1dffeb;
  --blue: #0078b5;
  /*--purple-gradient: linear-gradient(-90deg, #fa7ecf, #1c51cd);*/
  --purple-gradient: linear-gradient(to bottom right, #fa7ecf, #1c51cd);
  /*--blue-gradient: linear-gradient(-90deg, #0078b5, #1dffeb);*/
  --blue-gradient: linear-gradient(to bottom right, #1dffeb, #0078b5);
  --pink-gradient: linear-gradient(to bottom right, #1dffeb, #fa7ecf);
  /*--gold-gradient: warm gradient for boda/wedding packages*/
  --gold-gradient: linear-gradient(to bottom right, #ffd700, #ff8c00);

  --light: #fafafa;
  --whatsapp: #128c4a;
  --white: #FFFFFF;
}

body,
html {
  height: 100%;
}

body {
  position: relative;
  font-family: 'Poppins', sans-serif;
}

header {
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 99;
}

a {
  color: var(--primary);
}

:focus {
  outline: none !important;
}

select {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
  cursor: pointer;
}

.select-wraper {
  position: relative;
}

.select-wraper:before {
  font-family: LineIcons!important;
  content: '\EA45';
  color: #333;
  position: absolute;
  right: 15px;
  bottom: 10px;
  pointer-events: none;
}

.dropdown-menu {
  right: -15px;
  min-width: 150px;
  padding: 0;
  margin: 5px 0 0;
  border: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu>li>a {
  padding: 7px 20px;
}

.navbar-brand {
  padding: 5px 15px;
}

.navbar-brand>img {
  max-height: 100%;
}

.top-header {
  background-image: linear-gradient(-90deg, #fa7ecf, #1c51cd);
  ;
  padding: 5px 0px;
}

.top-header ul.info-data {
  list-style: none;
  padding: 0;
  display: inline-block;
  margin: 0;
}

.top-header ul.info-data>li {
  display: inline-block;
  margin-right: 20px;
}

.top-header ul.info-data>li>a {
  color: #fff;
  transition: all .2s ease-in-out;
  text-decoration: none !important;
}

.top-header ul.info-data>li>a>i {
  font-size: 15px;
  margin-right: 5px;
}

.top-header ul.info-data>li>a>span {
  display: none;
}

.top-header .right-action {
  display: inline-block;
  float: right;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.top-header .right-action>li {
  display: inline-block;
}

.top-header .right-action>li:not(:last-child) {
  margin-right: 20px;
}

.top-header .right-action>li>a {
  color: #fff;
  text-decoration: none !important;
}

.top-header .right-action>li>a>span {
  margin: 0 10px;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-default {
  background-color: #fff;
  border-color: #fff;
  margin: 0;
  border-radius: 0;
  transition: all .2s ease-in-out;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover {
  color: #333;
}

.navbar-default .navbar-nav>li>a:before,
.navbar-default .navbar-nav>li:before,
.navbar-default .navbar-nav>li:after {
  content: '';
  background: var(--blue-gradient);
  position: absolute;
  bottom: 8px;
  transition: all .3s ease-in-out;
  transform: scale(0);
}

.navbar-default .navbar-nav>li>a:before {
  width: calc(100% - 30px);
  height: 2px;
  border-radius: 1px;
  left: 10px;
}

.navbar-default .navbar-nav>li:before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  right: 15px;
}

.navbar-default .navbar-nav>li:after {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  right: 10px;
}

.navbar-default .navbar-nav>li>a:hover:before,
.navbar-default .navbar-nav>li.active>a:before,
.navbar-default .navbar-nav>li:hover:before,
.navbar-default .navbar-nav>li.active:before,
.navbar-default .navbar-nav>li:hover:after,
.navbar-default .navbar-nav>li.active:after {
  transform: scale(1);
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: transparent;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle {
  border-color: #fff;
  background: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--secondary);
  width: 30px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .nav > li > a {
    padding: 15px 5px !important;
  }

  .navbar>.container .navbar-brand {
    padding-left: 0;
    padding-right: 0;
  }
   
  .container>.navbar-collapse {
    padding: 0;
  }
}

section {
  padding: 50px 0;
  overflow: hidden;
}

section#index {
  position: relative;
}

section#index:before {
  content: '';
  background: var(--pink-gradient);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  opacity: 0.25;
}

section#home,
section#home .owl-carousel,
section#home .owl-carousel>.owl-stage-outer,
section#home .owl-carousel>.owl-stage-outer>.owl-stage,
section#home .owl-carousel>.owl-stage-outer>.owl-stage>.owl-item {
  height: 100%;
  padding: 0;
}

section#home .item {
  height: 100%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 0;
}

section#home .item:before {
  top: 0;
  left: 0;
  content: '';
  opacity: .3;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
}

section#home .item>.container {
  height: 100%;
  position: relative;
}

section#home .item>.container>.v-align {
  display: table;
  height: 100%;
  width: 80%;
  margin: auto;
}

section#home .item>.container>.v-align>.content {
  display: table-cell;
  vertical-align: middle;
  color: #000;
}

section#home .item>.container>.v-align>.content .text-huge>span {
  display: block;
}

section#home .item>.container>.v-align>.content h2 {
  margin-bottom: 25px;
}

section#home .owl-carousel .owl-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

section#home .owl-carousel button.owl-dot {
  background: #ccc;
}

section#home .owl-carousel .owl-prev,
section#home .owl-carousel .owl-next {
  width: 30px;
  height: 30px;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

section#home .owl-carousel .owl-prev {
  margin-left: 15px;
  transform: rotate(-135deg);
}

section#home .owl-carousel .owl-next {
  float: right;
  margin-right: 15px;
  transform: rotate(45deg);
}

section#home .owl-carousel .owl-prev>span,
section#home .owl-carousel .owl-next>span {
  display: none;
}

.btn {
  border: 0;
  padding: 10px 35px;
  font-size: 15px;
  border-radius: 25px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.btn-white {
  background: #fff;
  color: #333;
}

.btn-purple-gradient,
.btn-purple-gradient:focus,
.btn-purple-gradient:hover {
  background: var(--purple-gradient);
  color: #fff;
}

.btn-blue-gradient,
.btn-blue-gradient:focus,
.btn-blue-gradient:hover {
  background: var(--blue-gradient);
  color: #fff;
}

.btn-pink-gradient,
.btn-pink-gradient:focus,
.btn-pink-gradient:hover {
  background: var(--pink-gradient);
  color: #fff;
}

.btn-whatsapp,
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  color: #fff;
  background: var(--whatsapp);
  border-color: var(--whatsapp);
}

.card {
  position: relative;
  border-radius: 2rem;
  padding: 20px;
  margin: 15px 0 0;
  background: #fff;
  overflow: hidden;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.card.card-class .card-content ul>li>i {
  color: var(--primary);
  margin-right: 5px;
}

.card>.card-icon {
  width: 100%;
  text-align: center;
}

.card>i.card-icon,
.card>.card-icon>i {
  font-size: 50px;
}

.card>.card-icon>img {
  max-width: 80%;
  margin: auto;
}

.card.text-white>.card-icon>img {
  -webkit-filter: invert(100%);
}

.card>.card-content {
  text-align: center;
  /*font-family: Poppins;*/
  /*font-family: "Comic Sans MS", cursive, sans-serif;*/
  line-height: normal;
  min-height: 80px;
}

.card:before {
  position: absolute;
  z-index: 0;
  font-size: 50px;
  top: 30px;
  left: 47%;
}

.card.card-image figure {
  position: absolute;
  background: var(--purple-gradient);
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.card.card-image figure>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: .75;
}

.card.card-image .card-content {
  width: 75%;
  margin-left: 25%;
  text-align: right;
  padding-top: 100px;
}

.card.card-image .card-content>h3 {
  margin: 25px 0 15px 0;
  font-weight: bold;
  min-height: 40px;
  font-size: 18px;
  text-transform: uppercase;
}

.card.card-image .card-content .text-content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.card.card-image .image-content {
  border-radius: 1.5rem;
  padding-top: 60%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.card.card-image .image-content > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.card-image a.play-button,
.professor figure>a.play-button {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 7px 12px;
  transition: all .2s ease-in-out;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.card.card-image a.play-button:hover,
.professor figure>a.play-button:hover {
  transform: scale(1.1);
}

.how-it-works,
.contact-us {
  padding: 0 0 80px 0;
  background: var(--purple-gradient);
  position: relative;
}

.how-it-works>img,
.contact-us>img {
  margin-bottom: 40px;
}

.img-bg {
  width: 45%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.how-it-works ol {
  padding-left: 60px;
  color: #fff;
  font-size: 17px;
  list-style: none;
  counter-reset: li;
}

.how-it-works ol>li {
  counter-increment: li;
}

.how-it-works ol>li:before {
  content: counter(li);
  position: absolute;
  width: 40px;
  height: 40px;
  border: 1px solid;
  border-radius: 50%;
  padding: 7px 0;
  left: 15px;
  text-align: center;
}

section h1.text-huge {
  margin: 0px 0 30px;
}

section.home h1.text-huge {
  margin-bottom: 10px;
}

.card>.card-price {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.card>.card-price>h1,
.card>.card-price>h4 {
  margin: 0;
}

.card>.card-price>h1 {
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.card>.divider {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  margin: auto;
  position: relative;
}

.card>.divider:after,
.card>.divider:before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--primary);
  position: absolute;
  border-radius: 50%;
  top: 3px;
}

.card>.divider:after {
  right: -12px;
}

.card>.divider:before {
  left: -12px;
}

.card>.card-content ul {
  list-style: none;
  margin: 10px 0 20px 0;
  text-align: left;
}

.card>.card-content ul>li {
  margin-bottom: 5px;
  position: relative;
}

/* ponytail: plan cards (card-plan) — fixed title wrap, description rhythm,
   and consistent heights so cards line up in the owl-carousel. */
.card.card-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 8px;
  border-radius: 12px;
  /* ponytail: was `overflow: hidden` which clipped the .tier-badge (positioned
     top: -14px) — badges were partially hidden behind the card top edge.
     Card has no images inside so clipping isn't needed. price-wrap uses
     negative margin to overlap the header, which still works without
     overflow:hidden. The rounded corners still look fine because the
     contents are within the card bounds. */
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.card.card-plan .card-header {
  padding: 20px 16px 28px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.card.card-plan .card-header .title {
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 600;
  word-break: break-word;
  hyphens: auto;
}
.card.card-plan .card-header small {
  font-size: 1.2rem;
  opacity: 0.95;
  display: block;
  margin-top: 6px;
}
.card.card-plan .price-wrap {
  background: #fff;
  border-radius: 999px;
  padding: 8px 22px;
  margin: -16px auto 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-weight: 700;
  font-size: 1.85rem;
}
.card.card-plan .card-content {
  padding: 22px 18px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card.card-plan .card-content > div {
  flex: 1;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
}
.card.card-plan .card-content p { margin: 0 0 6px 0; }
.card.card-plan .card-content strong { display: block; margin: 0 0 8px 0; font-size: 1.25rem; }
/* ponytail: split long descriptions horizontally — intro paragraph on the
   left, "Incluye" bullet list on the right. Stacks vertically on narrow
   viewports. Fills the card width instead of leaving blank columns. */
.card.card-plan .plan-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
  margin-bottom: 12px;
}
.card.card-plan .plan-split > p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.45;
  align-self: center;
}
.card.card-plan .plan-split > p strong { font-size: 0.9rem; }
.card.card-plan .card-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.4;
}
.card.card-plan .card-content ul li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 2px;
  word-break: break-word;
}
.card.card-plan .card-content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary, #7c00c4);
  font-weight: 700;
}
.card.card-plan .card-content .btn {
  margin-top: auto;
  align-self: center;
}
@media (max-width: 991px) {
  .card.card-plan .plan-split { grid-template-columns: 1fr; }
}

.card>.card-content ul>li.unable {
  color: #ccc;
  text-decoration: line-through;
}

.card>.card-content ul>li.unable:before {
  content: '\E951';
  font-family: LineIcons!important;
  position: absolute;
  left: -20px;
  top: 5px;
  font-size: 12px;
}

.card>.card-content ul>li.enable:before {
  content: '';
  position: absolute;
  left: -18px;
  top: 2px;
  width: 6px;
  height: 12px;
  border-bottom: 1px solid #626262;
  border-right: 1px solid #626262;
  transform: rotate(45deg);
}

.card>.card-content ul>li>del {
  color: #ccc;
  text-decoration: line-through;
}

.card>.card-content ul>li>del:before {
  content: '\E951';
  font-family: LineIcons!important;
  position: absolute;
  left: -20px;
  top: 5px;
  font-size: 12px;
}

.card>.card-content ul>li>strong:before {
  content: '';
  position: absolute;
  left: -18px;
  top: 2px;
  width: 6px;
  height: 12px;
  border-bottom: 1px solid #626262;
  border-right: 1px solid #626262;
  transform: rotate(45deg);
}

.owl-carousel {
  position: relative;
}

.owl-carousel .owl-item {
  transition: all .4s ease-in-out;
}

#classes-carousel .owl-carousel .owl-item.active.center {
  transform: scale(1.1);
}

.owl-carousel .owl-item .item {
  padding: 5px 10px;
}

.owl-carousel .owl-item .item>img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 50%;
  margin: auto;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.owl-carousel .owl-item .item>h3 {
  text-align: center;
}

.owl-carousel .owl-item .item>h3>small {
  display: block;
}

.owl-carousel .owl-dots {
  text-align: center;
  margin: 15px 0 0 0;
}

/* ponytail: per-slide dots — one dot per carousel slide, as the user
expects from the standard OwlCarousel UX. classes-carousel has 15 slides
(highlighted active dot is wider, like the default OwlCarousel "active"
state — see OwlCarousel/dist/assets/owl.theme.default.css line ~80:
  .owl-theme .owl-dots .owl-dot span { width:10px; height:10px; ... }).
Override that with smaller, brand-colored dots that fit 15 across. The
.owl-theme prefix bumps specificity over the OwlCarousel default
(specificity 0,3,1 vs our 0,3,1 with one more class wins via tie-break).

Reset `border`/`padding`/`background` on the button so the BROWSER's
default <button> styling doesn't paint a square box around the SPAN
(that's exactly what the user was reporting as "un cuadro y dentro una
linea"). The visible shape must come from the SPAN only — the button is
a transparent click target. */
.owl-theme.owl-carousel button.owl-dot {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  font: 0/0 a;
  /* Override the WCAG AA touch-target floor (44px) for the carousel dots.
     The dots are visual indicators — the visible shape lives on the SPAN
     (8×8 inactive, 18×8 active). The button is a transparent click target;
     44px would balloon it into the "square with a line inside" artifact. */
  min-width: 0;
  min-height: 0;
}

.owl-theme.owl-carousel button.owl-dot,
.owl-theme.owl-carousel button.owl-dot span {
  width: 10px;
  height: 10px;
  background: var(--purple-gradient);
  border-radius: 50%;
  opacity: .45;
  margin: 0 5px 0 0;
  padding: 0;
  display: inline-block;
  transition: width .2s ease-in-out, opacity .2s ease-in-out,
              border-radius .2s ease-in-out;
}

.owl-theme.owl-carousel button.owl-dot.active,
.owl-theme.owl-carousel button.owl-dot.active span {
  width: 22px;
  height: 10px;
  opacity: 1;
  border-radius: 5px;
}

.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
}

.owl-carousel#classes-carousel button.owl-dot.active,
.owl-carousel#classes-carousel button.owl-dot.active span {
  background: var(--blue-gradient);
}

.owl-carousel.owl-full-carousel .owl-item.active.center {
  transform: scale(1.05);
  z-index: 99;
  opacity: 1;
}

.owl-carousel .owl-stage {
  padding: 0 0 20px 0;
}

.question {
  padding: 5px 0 5px 30px;
  position: relative;
}

.question:before {
  content: '';
  width: 20px;
  height: 2px;
  background: #333;
  position: absolute;
  left: 0px;
  top: 14px;
}

.question>strong {
  display: block;
}

.form-control {
  color: #000;
  height: 40px;
  padding: 10px 20px;
  background-color: #f3f3f3;
  border: 0;
  border-radius: 20px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus {
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

ul.contact-info {
  margin: 20px 0;
  list-style: none;
  padding: 0;
}

ul.contact-info li>a {
  color: #333;
  text-decoration: none;
  font-size: 22px;
  margin-bottom: 20px;
  display: block;
}

ul.contact-info li>a>i {
  font-size: 25px;
  color: #333;
  margin-right: 15px;
}

.professor {
  color: white;
}

.professor figure {
  position: relative;
}

.professor figure>img {
  width: 125px !important;
  height: 125px;
  margin: auto;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  display: block;
}

.professor figure>a.play-button {
  position: absolute;
  bottom: 0;
  right: 10%;
}

.professor>.title {
  text-align: center;
  word-break: break-word;
  min-height: 38px;
}

.professor ul {
  /*min-height: 40px;*/
}

.lity-wrap .professor ul {
  width: 35%;
  margin: 10px auto;
}

#professors-carousel.owl-carousel button.owl-dot {
  background: #fff !important;
}

.card.card-plan {
  padding: 0;
}

.card.card-plan .card-header {
  padding: 30px 25px 45px;
  font-size: 28px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  position: relative;
}

.card.card-plan .card-header .title {
  min-height: 89px;
}

.card.card-plan .card-header .title>small {
  display: block;
  margin-top: 5px;
  font-size: 75%;
}

.card.card-plan .card-header>.price {
  position: absolute;
  background: #fff;
  font-weight: bold;
  padding: 25px 40px;
  border-radius: 25px;
  left: calc(50% - 99px);
  bottom: -25%;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.card.card-plan .card-content {
  padding: 45px 25px 30px;
}

.card.card-class .card-header {
  float: left;
  width: 100%;
}

.card.card-class .card-header>.professor-thumbnail {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  float: left;
}

.card.card-class .card-header>.professor-thumbnail>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.card-class .card-header>.professor-name {
  width: calc(100% - 50px);
  padding: 0 15px;
  float: left;
  text-transform: uppercase;
  font-size: larger;
}

.card.card-class .card-header>.professor-name>a {
  font-size: small;
  display: block;
  text-transform: initial;
}

section.contact-us ul.contact-info,
section.contact-us form {
  margin-top: 25px;
}

form .error {
  color: #e91e63;
}

.loader-button {
  display: inline-block;
  position: relative;
  width: 75px;
  height: 100%;
}

.loader-button div {
  position: absolute;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader-button div:nth-child(1) {
  left: 8px;
  animation: loader-button1 0.6s infinite;
}

.loader-button div:nth-child(2) {
  left: 8px;
  animation: loader-button2 0.6s infinite;
}

.loader-button div:nth-child(3) {
  left: 32px;
  animation: loader-button2 0.6s infinite;
}

.loader-button div:nth-child(4) {
  left: 56px;
  animation: loader-button3 0.6s infinite;
}

@keyframes loader-button1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes loader-button3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes loader-button2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

footer {
  background: var(--secondary);
  padding: 30px 0;
}

footer .img-responsive {
  max-height: 60px;
}

footer .footer-items a {
  color: var(--white);
  padding: 0.375rem;
  display: inline-flex;
  align-items: center;
}

footer .footer-items a > i {
  font-size: 15px;
  margin-right: 5px;
}

footer .footer-items a:hover,
footer .footer-items a:active {
  color: var(--primary);
}

footer .footer-items ul {
  margin-top: 15px;
}

.lity-close,
.lity-close:hover {
  color: transparent;
}

.lity-close:after,
.lity-close:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  background: #fff;
  top: 50%;
  left: 0;
}

.lity-close:after {
  transform: rotate(45deg);
}

.lity-close:before {
  transform: rotate(-45deg);
}

.cursor-pointer {
  cursor: pointer;
}

.img-flipped {
  -webkit-transform: scaleX(-1); 
  transform: scaleX(-1);
}

.text-white {
  color: #fff;
}

.text-pink {
  color: var(--primary);
}

.text-blue-gradient {
  background: var(--blue-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-purple-gradient {
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-pink-gradient {
  background: var(--pink-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gold-gradient {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-light {
  background: var(--light);
}

.bg-blue-gradient {
  background: var(--blue-gradient);
}

.bg-purple-gradient {
  background: var(--purple-gradient);
}

.bg-pink-gradient {
  background: var(--pink-gradient);
}

.bg-gold-gradient {
  background: var(--gold-gradient);
}

.text-huge {
  font-size: 45px;
  margin-bottom: 2rem;
}

.text-huge>span {
  font-weight: bold;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lity-content:after {
  box-shadow: none;
}

#classes .btn {
  padding: 10px 10px;
  font-size: 13px;
}

#paymentmethods {
}

#paymentmethods img {
  margin: auto;
}

#paymentmethods .text-huge {
  padding: 25px 0;
  margin: 0;
  text-align: center;
}

#paymentmethods .text-huge>span {
  padding: 0 0 10px 0;
}


/**
 * Schedules index
 */

.schedule-index .item .card .card-content .hours-list {
  padding-left: 0px;
  text-align: center;
  overflow-y: auto;
  max-height: 183px;
}

.hours-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

.hours-list::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.hours-list::-webkit-scrollbar-thumb {
  background-color: #0078b5;
}

#proffesorInfo .professor-expertise {
  max-height: 250px;
  overflow-y: auto;
}

#proffesorInfo .professor-expertise::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#proffesorInfo .professor-expertise::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

#proffesorInfo .professor-expertise::-webkit-scrollbar-thumb {
  background-color: #0078b5;
}

.schedule-index .hour {
  padding: 10px;
  cursor: pointer;
  border-radius: 15px;
}

.schedule-index .hour:hover {
  font-weight: 600;
  color: #cc75cf;
  background: #cc75cf2b;
}

.schedule-index .hour.active {
  font-weight: 600;
  color: #ffffff;
  background: #cc75cf;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: transparent;
}

.valign-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

section.genres-section {
  padding: 0 !important;
}

section.genres-section .bg-contain {
  background-position: center center;
  background-size: cover;
  height: 100%;
  padding: 80px 0;
  display: flex;
  align-items: center;
  background-color: #e3e3e3;
  position: relative;
}

section.genres-section .bg-contain>.container {
  position: relative;
  z-index: 1;
}

section.genres-section .bg-contain:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  top: 0;
  left: 0;
}

.mt-2 {
  margin-top: .5rem;
}

.mb-2 {
  margin-bottom: .5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 2rem;
}

.mb-8 {
  margin-bottom: 2.5rem;
}

.w-100 {
  width: 100%;
}

.divider-text {
  display: flex;
  align-items: center;
}

.divider-text>hr {
  flex: 1;
}

.divider-text>label {
  margin: 0 1rem;
}

.stop-scroll {
  overflow: hidden !important;
}

[v-cloak] {
  display: none;
}

@media (max-width: 767px) {
  .text-huge {
    font-size: 35px;
  }
  .navbar-default .navbar-nav li.active {
    background: #f3f3f3;
  }
  .navbar-default .navbar-nav>li:before {
    display: none;
  }
  .navbar-default .navbar-nav>li:after {
    display: none;
  }
  section.home>.container>.row>.col-md-6>.media {
    position: absolute;
    bottom: 15px;
    max-width: 50%;
    right: 15px;
  }
  section.home>.container>.row>.col-xs-12 {
    display: inline-block;
    height: auto;
  }
  ul.contact-info li>a {
    font-size: 18px;
  }
  .navbar-default .navbar-nav>li>a {
    padding-left: 45px;
  }
  .navbar-default .navbar-nav>li.active>a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue-gradient);
    position: absolute;
    bottom: 42%;
    left: 15px;
  }
  .navbar-default .navbar-nav>li.active>a:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue-gradient);
    position: absolute;
    bottom: 37%;
    left: 25px;
  }
  .navbar-default .navbar-toggle .icon-bar.closing {
    position: absolute;
    top: 52%;
    margin: 0;
    transition: all .2s ease-in-out;
    opacity: 0;
  }
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar:not(.closing) {
    opacity: 0;
  }
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.closing {
    transform: rotate(45deg);
    opacity: 1;
  }
  .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.closing:nth-child(2) {
    transform: rotate(-45deg);
  }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: #fff;
    border-bottom: 1px solid var(--blue);
  }
  section#whybailante .card {
    padding: 10px;
  }
  section#whybailante .card>.card-content {
    min-height: 40px;
  }
  section#whybailante .card>.card-content h3 {
    font-size: 18px;
  }
  .professor figure>a.play-button {
    position: absolute;
    bottom: 0;
    right: 5%;
  }
  section#frequent-questions {
    position: relative;
  }
  section#frequent-questions .col-md-4 {
    position: absolute;
    width: 125%;
    right: -50%;
    bottom: 0;
    z-index: 0;
    opacity: .1;
  }
  section#contact-us form {
    margin-bottom: 30px;
  }
  footer .text-right {
    text-align: center !important;
  }
  footer .img-responsive {
    display: block;
    margin: auto;
  }
  section#home .item>.container>.v-align>.content h2 {
    font-size: 22px;
  }
  ul.contact-info {
    margin: 20px 50px;
  }
  /*section {
    padding: 30px 0;
  }*/
  .dropdown:hover .dropdown-menu {
    margin: 0 45px;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-nav .open .dropdown-menu>li>a {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .top-header ul.info-data>li>a>span {
    display: inline-block;
  }
  .nav>li>a {
    padding: 15px 10px;
  }
  section.home>.container>.row>.col-md-6>.media {
    vertical-align: middle;
  }
  .card>.card-content ul {
    margin: 20px 0 20px 0;
    padding-left: 25px;
  }
}

@media (max-width: 991px) {
  .owl-carousel.owl-full-carousel .owl-stage-outer {
    overflow: visible;
  }
  /* ponytail: opacity .5 removed — was making every card on mobile look
     washed out (the "opaco" effect reported on the Shows tab). */
  .owl-carousel.owl-full-carousel .owl-item .item {
    padding: 5px 0px;
  }
  .owl-carousel.owl-full-carousel .owl-dots {
    margin: 50px 0 0 0;
  }
  .professor .btn {
    padding: 10px 25px;
  }
  .text-sm-center {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .card.card-plan .card-header {
    padding: 30px 50px 45px;
  }
  ul.contact-info li>a {
    font-size: 18px;
  }
  .owl-carousel .owl-stage {
    padding: 30px 0 30px 0;
  }
  .owl-carousel.owl-full-carousel .owl-item.active.center {
    transform: scale(1.12);
  }
}

@media (min-width: 992px) {
  section#home .item>.container>.v-align {
    width: 50%;
    margin: 0;
  }
  section#home .item {
    background-position: top right !important;
  }
  section#home .item.bg-contain {
    background-size: contain !important;
  }
}

@media (min-width: 1200px) {
  .nav>li>a {
    padding: 15px 15px;
  }
  .card>.card-content ul {
    margin: 10px 0 20px 0;
    padding-left: 40px;
  }
  #classes .card {
    padding: 15px;
  }
  #classes .card.card-image .card-content {
    width: 80%;
    margin-left: 20%;
  }
  #classes .card.card-image .card-content>h3 {
    margin: 20px 0 10px 0;
    font-size: 14px;
  }
  section#home .owl-carousel .owl-prev {
    margin-left: 35px;
  }
  section#home .owl-carousel .owl-next {
    margin-right: 35px;
  }
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    /* remove the gap so it doesn't close*/
  }
  .dropdown:not(:hover) .dropdown-menu {
    display: none;
  }
}

/* ponytail: plan category blocks — let cards keep their natural height.
   Removed the flex-stretch that was forcing equal heights (cards now
   size to content). Owl-carousel still drives the swipe layout but each
   .item is just a regular inline block — no forced 100% height. */
.card.card-plan {
  height: auto;
}
.card.card-plan .card-content {
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   Curated paquetes redesign — tier grid + recommended badge
   (sdd/landing-paquetes-redesign)
   ───────────────────────────────────────────────────────────── */
.paquetes-curated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 16px 16px 0;
    /* ponytail: top padding gives the absolute-positioned tier-badge (top:-14px)
       room above each card so it never collides with the section title's
       bottom edge on the middle "RECOMENDADO" card. */
}
@media (max-width: 900px) {
    .paquetes-curated-grid { grid-template-columns: 1fr; gap: 16px; }
}
.card-plan {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 28px 22px 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
.card-plan:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
.card-plan--recommended {
    border: 2px solid #f5a623;
    box-shadow: 0 12px 32px rgba(245,166,35,0.20);
    transform: scale(1.04);
}
@media (max-width: 900px) { .card-plan--recommended { transform: none; } }
.tier-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5a623;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(245,166,35,0.30);
    white-space: nowrap;
}
.tier-badge--esencial { background: #6b7280; box-shadow: 0 2px 8px rgba(107,114,128,0.30); }
.tier-badge--elite { background: #1c51cd; box-shadow: 0 2px 8px rgba(28,81,205,0.30); }
.card-plan__title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c2434;
    margin: 8px 0 4px;
    text-align: center;
    line-height: 1.25;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-plan__clases {
    font-size: 0.82rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 12px;
}
.card-plan__price {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 2.4rem;
    font-weight: 800;
    color: #f5a623;
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
}
.card-plan--recommended .card-plan__price { color: #d97706; }
.card-plan__per-class {
    font-size: 0.78rem;
    color: #9ca3af;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 500;
}
.card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
    flex: 1;
}
.card-bullets li {
    padding: 5px 0 5px 22px;
    font-size: 0.88rem;
    color: #374151;
    position: relative;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.card-bullets li:last-child { border-bottom: none; }
.card-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 5px;
    color: #22c55e;
    font-weight: 800;
    font-size: 1rem;
}
.btn--whatsapp {
    display: block;
    width: 100%;
    background: #128c4a;
    color: #fff;
    text-align: center;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 8px;
    transition: background .2s;
    font-size: 0.95rem;
}
.btn--whatsapp:hover { background: #0e6e3d; color: #fff; }
.btn--buy {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--brand-purple, #6c5ce7);
    border: 2px solid var(--brand-purple, #6c5ce7);
    text-align: center;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
    font-size: 0.95rem;
}
.btn--buy:hover { background: var(--brand-purple, #6c5ce7); color: #fff; }
.paquetes-ver-mas {
    display: inline-block;
    margin: 16px auto 32px;
    padding: 10px 24px;
    background: #f3f4f6;
    color: #1c2434;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s;
    text-align: center;
}
.paquetes-ver-mas:hover { background: #e5e7eb; color: #1c2434; }
.paquetes-extra {
    background: #fafafa;
    padding: 24px 16px;
    border-radius: 12px;
    margin-top: 16px;
}
.paquetes-extra[hidden] { display: none; }
.paquetes-extra__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c2434;
    text-align: center;
    margin: 0 0 20px;
}
.paquetes-extra h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
    margin: 16px 0 10px;
    text-align: center;
}
@media (max-width: 768px) {
    .card-plan { padding: 22px 18px 18px; }
    .card-plan__price { font-size: 2rem; }
}

/* ─────────────────────────────────────────────────────────────
   Paquetes visual depth pass (sdd/landing-paquetes-elevate)
   ───────────────────────────────────────────────────────────── */
@keyframes tierBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .card-plan, .card-plan--recommended { transform: none !important; transition: none !important; }
    .card-plan--recommended .tier-badge--popular { animation: none !important; }
    .paquetes-ver-mas__chevron { transition: none !important; }
}
.card-plan {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .card-plan:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
}
@media (max-width: 900px) {
    .card-plan, .card-plan--recommended { transform: none !important; }
    .card-plan:hover { transform: none !important; box-shadow: 0 6px 12px rgba(0,0,0,.175); }
}
.card-plan--recommended {
    background: linear-gradient(180deg, #fffbf2 0%, #fff 60%);
    border: 2px solid #f5a623;
    box-shadow: 0 6px 12px rgba(0,0,0,.175), 0 16px 36px rgba(245,166,35,0.25);
    transform: scale(1.06);
    overflow: hidden;
}
.card-plan--recommended::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(to bottom right, #ffd700, #ff8c00);
    border-radius: 14px 14px 0 0;
    z-index: 2;
}
.card-plan--recommended .tier-badge--popular {
    animation: tierBadgePulse 2.4s ease-in-out infinite;
    z-index: 3;
}
@media (max-width: 900px) {
    .card-plan--recommended { transform: none; }
}
.card-plan__price {
    background: linear-gradient(to right, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}
.card-bullets li::before { content: none; }
.card-bullet__check {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 8px;
    flex-shrink: 0;
}
.card-bullets li {
    display: flex;
    align-items: flex-start;
}
.paquetes-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.paquetes-ver-mas__chevron {
    transition: transform .25s ease;
    display: inline-block;
}
.paquetes-ver-mas.is-open .paquetes-ver-mas__chevron {
    transform: rotate(180deg);
}
.paquetes-section-rating {
    text-align: center;
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 18px;
    font-weight: 500;
}
.paquetes-section-rating strong {
    color: #f59e0b;
    font-weight: 700;
}
.paquetes-curated-grid-wrap {
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    padding: 24px 0;
    border-radius: 16px;
}
@media (max-width: 900px) {
    .paquetes-curated-grid-wrap { background-image: none; padding: 8px 0; }
}

/* ─────────────────────────────────────────────────────────────
   WCAG AA touch targets (sdd/seo-aeo-audit-round3-2026-q4)
   ───────────────────────────────────────────────────────────── */
.btn, button, a.nav-link, .owl-prev, .owl-next, .owl-dot {
    min-height: 44px;
    min-width: 44px;
}

/* ─────────────────────────────────────────────────────────────
   WCAG AA focus-visible (sdd/seo-aeo-audit-round3-2026-q4)
   ───────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #7c00c4;
    color: white;
    padding: 12px 16px;
    z-index: 9999;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 3px solid #7c00c4;
    outline-offset: 2px;
}

/* ponytail: professor fallback chips — used by front.pages.partials.teachers
   when the DB query returns empty so the section never ships blank. */
.professors-fallback {
    padding: 32px 16px;
}
.professor-chip {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ponytail: tier-badge z-index — without this, the RECOMENDADO badge on the
   scaled middle card can be visually overlapped by sibling headings or by
   neighboring card borders. Bumping z-index to 2 keeps the badge above
   the section title and adjacent cards. */
.tier-badge { z-index: 2; }

/* ponytail: SVG checkmarks on /coreografias-bodas-y-quinces were rendering at
   intrinsic 905×905px because no width/height was set. Constrain to 14×14. */
.card-bullet__check,
.card-bullet__check svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

/* ponytail: paquetes section title must wrap, not overflow. Without this,
   the long "coreografía" word gets visually cut at the right edge in
   the home paquetes grid (visible in the screenshot as "coreografía"
   with a missing trailing "f"). */
.paquetes-section__title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 16px;
    padding: 0 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.25;
}

/* ponytail: RECOMENDADO tier-badge was being clipped on the scaled card.
   card-plan--recommended has transform: scale(1.04) which scales the
   badge too — the absolute-positioned badge sits at top: -14px which
   becomes ~-14.56px after scaling, but the text "⭐ RECOMENDADO" is
   longer than the other badges and gets cut. Solution: explicit z-index
   and overflow on the card, and slightly more padding inside the badge. */
.card-plan--recommended { overflow: visible !important; }
.tier-badge--popular {
    z-index: 3;
    padding: 7px 16px;
    white-space: nowrap;
    max-width: max-content;
}