/*
  Media Maratón La Ceja — Formulario de Inscripción
  Estilos principales del wizard de inscripción

  [Tabla de contenido]

  0. Variables globales
  1. Base y tipografía
     1.1 Reset / Base
     1.2 Tipografía
     1.3 Links
  2. Layout
     2.1 Estructura principal
     2.2 Columna izquierda (imagen)
     2.3 Columna derecha (formulario)
  3. Wizard
     3.1 Contenedor y progreso
     3.2 Botones de navegación
     3.3 Resumen (submit step)
  4. Componentes de formulario
     4.1 Inputs y selects
     4.2 Checkboxes
     4.3 Radio buttons (group_radios)
     4.4 Tipo de camiseta
     4.5 Select2 / Nice-select
     4.6 Errores de validación
  5. Componentes UI
     5.1 Botones
     5.2 Modales
     5.3 Datos de seguridad / alertas
     5.4 Código de descuento
     5.5 Confirmación de pago
     5.6 Loader
  6. Utilidades y spacing
  7. Responsive
*/

/* ============================================================
   0. VARIABLES GLOBALES
   ============================================================ */
:root {
  /* Colores principales */
  --color-primary:        #304258;
  --color-primary-dark:   #304258;
  --color-secondary:      #7dc9ef;
  --color-secondary-light:#7dc9ef;
  --color-accent:         #ffb776;

  /* Colores de texto */
  --color-text:           #555;
  --color-text-dark:      #222;
  --color-text-muted:     #7d7d7d;
  --color-text-light:     #999;

  /* Colores de fondo */
  --color-bg:             #fff;
  --color-bg-light:       #f8f8f8;

  /* Colores de borde */
  --color-border:         #d2d8dd;
  --color-border-light:   #ededed;

  /* Colores de estado */
  --color-error:          #e34f4f;
  --color-warning-bg:     #fcf8e3;
  --color-warning-border: #f39c12;

  /* Fuentes */
  --font-base:            "Inter Tight", Sans-serif Arial, sans-serif;
  --font-display:         "UT Shoundra oblique", sans-serif;

  /* Tamaños de fuente */
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.8125rem;  /* 13px */
  --font-size-base:       0.875rem;   /* 14px */
  --font-size-md:         1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */

  /* Border radius */
  --radius-sm:            15px;
  --radius-md:            10px;
  --radius-lg:            15px;
  --radius-xl:            20px;
  --radius-full:          50%;

  /* Transiciones */
  --transition:           all 0.3s ease-in-out;
  --transition-fast:      all 0.15s ease-in-out;

  /* Sombras */
  --shadow-modal:         0px 0px 20px 0px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   1. BASE Y TIPOGRAFÍA
   ============================================================ */

/* 1.1 Reset / Base */
html, body { height: 100%; }

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.elementor-shortcode,
.container-fluid.full-height{
   font-family: "Inter Tight" , sans-serif;
}
body {
  background: var(--color-bg);
  font-size: var(--font-size-base);
  line-height: 1.4;
  font-family: var(--font-base);
  color: var(--color-text);
}

ul, ol {
  list-style: none;
  margin: 0 0 25px 0;
  padding: 0;
}

hr {
  margin: 30px 0;
  border-color: #ddd;
}

p { margin-bottom: 1rem; }

strong { font-weight: 500; }

/* 1.2 Tipografía */
h1, h2, h3, h4, h5, h6 { color: var(--color-text-dark); }

label {
  font-weight: 400;
  margin-bottom: 5px;
  color: var(--color-text-muted);
}

.error_message {
  font-weight: 500;
  color: var(--color-error);
}

/* 1.3 Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
  outline: none;
}
a:hover, a:focus {
  color: #111;
  text-decoration: none;
  outline: none;
}

a.animated_link {
  position: relative;
  text-decoration: none;
}
a.animated_link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: var(--color-primary);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease;
}
a.animated_link:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
a.animated_link.active {
  color: var(--color-primary);
}
a.animated_link.active:before {
  visibility: visible;
  transform: scaleX(1);
}


/* ============================================================
   2. LAYOUT
   ============================================================ */

/* 2.1 Estructura principal */
.row-height { /* hereda altura natural */ }

/* 2.2 Columna izquierda */
.content-left {
  background: url(https://mediamaratonlaceja.com/wp-content/uploads/2026/06/fondo-120.jpg) no-repeat center center;
  background-size: cover;
  padding: 0;
}

.content-left-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 100%;
  padding: 60px 90px 35px 90px;
  color: #fff;
  position: relative;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}
.content-left-wrapper h2 {
  color: #fff;
  font-size: 2rem;
  margin: 20px 0 15px 0;
  font-weight: 400;
}
.content-left-wrapper p {
  font-size: 0.9375rem;
  opacity: 0.8;
}
.content-left-wrapper .btn_1 { margin: 25px 0; }
.content-left-wrapper .btn_1.mobile_btn { display: none; }

/* 2.3 Columna derecha */
.content-right {
  padding: 60px;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  scrollbar-width: none;
}


/* ============================================================
   3. WIZARD
   ============================================================ */

/* 3.1 Contenedor y progreso */
#wizard_container {
  width: 100%;
  max-width: 650px;
}

h3.main_question {
  margin: 0 0 20px 0;
  padding: 0;
  font-weight: 500;
  font-size: var(--font-size-lg);
}
h3.main_question strong {
  margin-right: 5px;
  color: var(--color-text-light);
  margin-bottom: 5px;
}

#top-wizard { padding-bottom: 20px; }

#middle-wizard { min-height: 330px; }

#bottom-wizard {
  border-top: 2px solid var(--color-border-light);
  padding-top: 20px;
  text-align: right;
  margin-top: 25px;
}

/* Barra de progreso */
.ui-progressbar {
  height: 2px;
  width: 100%;
}
.ui-progressbar .ui-progressbar-value {
  height: 100%;
  transition: all 0.2s ease;
}
.ui-widget-content { background-color: transparent; }
.ui-widget-content a { color: var(--color-text-dark); }
.ui-widget-header {
  background: linear-gradient(90deg, #d3c15c 25%, #ffe03a 100%);
}
.ui-widget-header a { color: var(--color-text-dark); }

/* Animación de pasos */
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wizard-step { animation: fadein 1s ease forwards; }

/* 3.2 Botones de navegación del wizard */
button.backward,
button.forward,
button.submit {
  border: none;
  color: #fff;
  transition: background 0.5s ease;
  display: inline-block;
  cursor: pointer;
  outline: none;
  text-align: center;
  background: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-sm);
  line-height: 1;
  padding: 12px 30px;
}
button.backward {
  color: #777;
  background: #e8e8e8;
}
button[disabled] { display: none; }

.backward:hover,
.forward:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

/* 3.3 Resumen (submit step) */
.summary ul { margin: 0; padding: 0; }
.summary ul li {
  margin: 0;
  padding: 0 0 0 45px;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  margin-bottom: 25px;
}
.summary ul li:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.summary ul li strong {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  border: 2px solid #ddd;
  line-height: 0;
}
.summary ul li h5 {
  padding-top: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
}
.summary ul li ul { margin: 20px 0 25px 0; padding: 0; }
.summary ul li ul li { margin: 0; padding: 0; border-bottom: 0; }
.summary label { font-weight: 600; color: #333; }
.summary span { display: block; font-weight: 400; }
.summary-header { display: flex; gap: 12px; margin-bottom: 10px; }

/* Valor de inscripción */
.valor_inscripcion {
  gap: 5px;
  margin-bottom: 15px;
  font-family: var(--font-display);
  background: linear-gradient(90deg, var(--color-secondary-light) 25%, var(--color-secondary) 100%);
  padding:  10px 20px;
  display: inline-flex;
  border-radius: 20px;
  margin-left: 10px;
  color: white;
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.announcement span {
  background: linear-gradient(90deg, #1db292 25%, #6ec592 100%);
  padding: 5px;
  transform: skewX(-14deg);
  display: inline-flex;
  margin-left: 10px;
  color: white;
  font-weight: 700;
}
.announcement.gold   span { background: linear-gradient(90deg, #d3c15c 25%, #ffe03a 100%); }
.announcement.silver span { background: linear-gradient(90deg, #d3d3d3 25%, #8898a2 100%); }


/* ============================================================
   4. COMPONENTES DE FORMULARIO
   ============================================================ */

/* 4.1 Inputs y selects */
.form-group {
  position: relative;
  margin-bottom: 1rem;
}
.form-group.terms { padding: 12px 0 0 0; }
.form-group i {
  font-size: var(--font-size-lg);
  position: absolute;
  right: 5px;
  top: 11px;
  color: #ccc;
  width: 25px;
  height: 25px;
  display: block;
  font-weight: 400 !important;
}

.form-control {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--font-size-md);
  height: calc(2.55rem + 2px);
}
.form-control:focus {
  box-shadow: none;
  border-color: var(--color-primary) !important;
}

input[type="date"] {
  border-radius: var(--radius-lg);
  appearance: none;
  -webkit-appearance: none;
  min-height: 18px;
  background-color: white !important;
  color: #333;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--color-border);
}

input#website { display: none; }

/* Fileupload */
input[type="file"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px;
  height: auto;
  width: 100%;
  color: var(--color-text-light);
}
input[type="file"]:focus { box-shadow: none; outline: none; }
input[type="file"]::-webkit-file-upload-button {
  color: #fff;
  font-size: 13px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px 8px 38px;
  background: var(--color-primary) url(../img/upload_icon.svg) 8px center no-repeat;
  outline: none;
}
input[type="file"]::-webkit-file-upload-button:focus { box-shadow: none; outline: none; }

/* Styled select wrapper */
.styled-select { position: relative; }
.styled-select span.error { top: -20px; }

/* 4.2 Checkboxes */
.container_check {
  display: block;
  position: relative;
  font-size: var(--font-size-base);
  padding-left: 30px;
  line-height: 1.3;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}
.link-s,
.container_check a{ color: var(--color-accent); font-weight:500; text-decoration: underline; }
.container_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.container_check input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border: 1px solid transparent;
}
.container_check input:checked ~ .checkmark:after { display: block; }
.container_check .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.container_check .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.container_check.version_2 { padding: 6px 0 0 45px; min-height: 30px; }
.container_check.version_2 .checkmark { height: 30px; width: 30px; }
.container_check.version_2 .checkmark:after { left: 12px; top: 8px; }

/* 4.3 Radio buttons (group_radios) */
.container_radio {
  display: block;
  position: relative;
  font-size: var(--font-size-base);
  padding-left: 30px;
  line-height: 1.3;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}
.container_radio input { position: absolute; opacity: 0; }
.container_radio input:checked ~ .checkmark:after { opacity: 1; }
.container_radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--color-bg);
  border: 1px solid #ccc;
  border-radius: var(--radius-full);
}
.container_radio .checkmark:after {
  display: block;
  content: "";
  position: absolute;
  opacity: 0;
  transition: var(--transition);
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}
.container_radio.version_2 { padding: 6px 0 0 45px; min-height: 30px; }
.container_radio.version_2 .checkmark { height: 30px; width: 30px; border: 1px solid #ccc; border-radius: var(--radius-full); }
.container_radio.version_2 .checkmark:after { width: 30px; height: 30px; top: -1px; left: -1px; }
.container_radio.version_2 input:checked ~ .checkmark:before { opacity: 1; }
.container_radio.version_2 .checkmark:before {
  display: block;
  content: "";
  position: absolute;
  opacity: 0;
  transition: var(--transition);
  left: 12px;
  top: 8px;
  width: 5px;
  height: 10px;
  border: solid white;
  z-index: 999;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.radio_input .container_radio { display: inline-block; margin: 12px 0 0 12px; }
.radio_input .error { left: -15px; top: -30px; right: inherit; }

.group_radios { position: relative; }
.group_radios label input { opacity: 0; position: absolute; z-index: -999; }
.group_radios label {
  border: 1px solid #c7c7c7;
  padding: 10px 30px;
  border-radius: var(--radius-md);
  margin: 10px;
  transition: var(--transition);
  text-align: center;
  font-weight: bold;
}
.group_radios label:hover,
.group_radios label:focus,
.group_radios label.active {
  border-color: var(--color-primary);
  transform: scale(1.02);
  background: var(--color-primary);
  color: white;
}

/* 4.4 Tipo de camiseta */
.tipo_camisetas { position: relative; }
.tipo_camisetas label input { opacity: 0; position: absolute; z-index: -999; }
.tipo_camisetas label { text-align: center; }
.tipo_camisetas label img {
  border: 1px solid #c7c7c7;
  padding: 10px;
  border-radius: var(--radius-xl);
  margin: 10px;
  transition: var(--transition);
}
.tipo_camisetas label p { margin-top: 15px; }
.tipo_camisetas label:hover img,
.tipo_camisetas label:focus img,
.tipo_camisetas label.active img {
  border: 2px solid var(--color-primary);
  transform: scale(1.02);
}
.tipo_camisetas label.active p { color: var(--color-primary); font-weight: 600; }

/* 4.5 Select2 / Nice-select */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  height: 41px !important;
}
.select2.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-width: 9px 3px 0 3px !important;
}
.select2 .select2-selection.select2-selection--single { padding: 0 10px !important; }
.iti--allow-dropdown { width: 100%; }
.iti__selected-country:hover { background-color: transparent !important; }

.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 15px;
  padding-right: 27px;
  position: relative;
  text-align: left !important;
  transition: var(--transition-fast);
  user-select: none;
  white-space: nowrap;
  width: 100%;
  color: #6c757d;
}
.nice-select:active,
.nice-select.open,
.nice-select:focus { border-color: var(--color-primary); }
.nice-select:after {
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  content: '';
  display: block;
  height: 8px;
  margin-top: -5px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  transition: var(--transition-fast);
  width: 8px;
}
.nice-select.open:after { transform: rotate(-135deg); }
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.nice-select.wide { float: unset; width: 100%; }
.nice-select.wide .list { left: -1px !important; right: -1px !important; }
.nice-select.right { float: right; }
.nice-select.right .list { left: auto; right: 0; }
.nice-select span { width: 100%; display: block; overflow: hidden; }
.nice-select .list {
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden auto;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(-25px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9999;
  height: 23vh;
}
.nice-select .list:hover .option:not(:hover) { background-color: transparent !important; }
.nice-select .list::-webkit-scrollbar { width: 14px; height: 18px; }
.nice-select .list::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.15);
}
.nice-select .list::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.nice-select .list::-webkit-scrollbar-corner { background-color: transparent; }
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 38px;
  list-style: none;
  min-height: 38px;
  outline: none;
  padding-left: 15px;
  padding-right: 26px;
  text-align: left;
  transition: all 0.2s;
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus { background-color: #f6f6f6; }
.nice-select .option.selected { font-weight: 500; }
.nice-select .option.disabled { background-color: transparent; color: var(--color-text-light); cursor: default; }
.no-csspointerevents .nice-select .list { display: none; }
.no-csspointerevents .nice-select.open .list { display: block; }

/* 4.6 Errores de validación */
span.error {
  transition: var(--transition);
  font-size: var(--font-size-xs);
  position: absolute;
  border-radius: var(--radius-sm);
  top: -28px;
  left: 5px;
  z-index: 2;
  min-height: 25px;
  line-height: 1;
  background-color: var(--color-error);
  color: #fff;
  font-weight: normal;
  display: inline-block;
  padding: 6px 8px;
}
span.error:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent var(--color-error);
  display: block;
  width: 0;
  z-index: 1;
  bottom: -6px;
  left: 20%;
}
.container_radio.version_2 .error,
.container_check.version_2 .error { left: -15px; top: -30px; right: inherit; }
.terms span.error { top: -30px; left: -15px; right: inherit; }
.rating span.error { top: -30px; }

.text-cejeno { font-size: .8rem; }


/* ============================================================
   5. COMPONENTES UI
   ============================================================ */

/* 5.1 Botones */
a.btn_1,
.btn_1 {
  border: none;
  color: #fff;
  background: var(--color-primary);
  outline: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  padding: 12px 25px;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  transition: var(--transition);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}
a.btn_1:hover,
.btn_1:hover { background-color: var(--color-primary-dark); color: #fff; }
a.btn_1.full-width,
.btn_1.full-width { display: block; width: 100%; text-align: center; margin-bottom: 5px; }
a.btn_1.small,
.btn_1.small { padding: 7px 10px; font-size: var(--font-size-sm); }
a.btn_1.medium,
.btn_1.medium { font-size: var(--font-size-md); padding: 18px 30px; }
a.btn_1.rounded,
.btn_1.rounded { border-radius: 25px !important; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); }

/* 5.2 Modales */
.modal-content {
  border: none;
  box-shadow: var(--shadow-modal);
}
.modal-dialog h3 { font-size: var(--font-size-md); }
.modal-dialog h4 { font-size: var(--font-size-md); }
.list_rules { list-style: auto; padding-left: 20px; }

/* 5.3 Datos de seguridad / alertas */
.datos-seguridad {
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-primary);
  background-color: aliceblue;
  padding: 15px;
  position: relative;
  margin: 15px 0;
  display: block;
}
.datos-seguridad .image-plus { position: absolute; top: -15px; right: -15px; }
.datos-seguridad .summary-header h5 {
  margin: 0 !important;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-md);
}
.datos-seguridad p { font-size: .9rem; }
.datos-seguridad p label { font-weight: 500; }
.datos-seguridad .btn { background: var(--color-primary); border-color: var(--color-primary); }

/* 5.4 Código de descuento */
.datos-seguridad.descuento .btn { border-radius: var(--radius-xl); padding: 10px 30px; }
#codigo_section .message p.error   { color: red !important; }
#codigo_section .message p.success { color: var(--color-primary); }

.woocommerce-info {
  margin: 10px 0;
  padding: 10px;
  border: 2px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: #000;
  border-radius: var(--radius-xl);
}
.woocommerce-info::before { content: unset !important; }

/* 5.5 Confirmación / redirección de pago */
#confirmation-page {
  background: url(https://mediamaratonlaceja.com/wp-content/uploads/2026/06/fondo.jpg) no-repeat center center / cover;
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top: 0;
}
#confirmation-page.open         { display: flex; }
#confirmation-page.open .icon  { display: block; }
#confirmation-page .icon        { display: none; }
#confirmation-page h4 {
  color: white;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.5rem;
}
#confirmation-page .message { color: white; font-size: 1.5rem; }

/* 5.6 Loader */
#loader_form {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 999999;
  display: none;
}

[data-loader="circle-side-2"] {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  animation: circle-spin infinite .95s linear;
  border: 2px solid #333;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
}

@keyframes circle-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes circle-spin {
  0%   { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}


/* ============================================================
   6. UTILIDADES Y SPACING
   ============================================================ */
.add_bottom_10 { margin-bottom: 10px; }
.add_bottom_15 { margin-bottom: 15px; }
.add_bottom_30 { margin-bottom: 30px; }
.add_bottom_45 { margin-bottom: 45px; }
.add_bottom_60 { margin-bottom: 60px; }
.add_bottom_75 { margin-bottom: 75px; }
.add_top_10    { margin-top: 10px; }
.add_top_15    { margin-top: 15px; }
.add_top_20    { margin-top: 20px; }
.add_top_30    { margin-top: 30px; }
.add_top_60    { margin-top: 60px; }
.more_padding_left { padding-left: 40px; }
.nomargin_top  { margin-top: 0; }
.nopadding     { margin: 0 !important; padding: 0 !important; }
.nomargin      { margin: 0 !important; }
.margin_30     { padding-top: 30px; padding-bottom: 30px; }
.margin_60     { padding-top: 60px; padding-bottom: 60px; }
.margin_60_35  { padding-top: 60px; padding-bottom: 35px; }

/* Misc */
#whatsAppFloatingButton { display: none !important; }
.elementor-4631 { width: 100% !important; }
.elementor-4610, .elementor-4610 > div { height: 100% !important; }
.daterangepicker td { padding: 1px; }


/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .row-height        { height: auto; }
  .content-right     { height: auto; padding: 30px 15px; }
  #middle-wizard     { min-height: inherit; }

  .content-left-wrapper {
    height: auto;
    flex-direction: column;
    padding: 45px 30px 35px 30px;
  }
  .content-left-wrapper figure img { height: 150px; }
  .content-left-wrapper .btn_1    { display: none; }
}

@media (max-width: 767px) {
  .content-left-wrapper           { padding: 45px 15px 35px 15px; }
  .content-left-wrapper h2        { font-size: 1.625rem; }
  .content-left-wrapper p         { font-size: var(--font-size-base); }
  .content-left-wrapper .btn_1.mobile_btn {
    margin: 5px 0 30px 0;
    display: inline-block;
  }
}

@media (max-width: 640px) {
  .valor_inscripcion             { display: block; }
  .group_radios                  { flex-wrap: wrap; }
  .tipo_camisetas label img      { margin: 0; }
  .tipo_camisetas label figure   { margin-bottom: 20px; }
  .announcement span             { margin: 0; }
  #confirmation-page h4          { font-size: 2rem; }
  .summary ul li                 { position: relative; padding-left: 15px; margin-bottom: 25px; }
  .summary ul li strong          { position: unset; }
  .select2-container             { width: 100% !important; }
  .datos-seguridad.descuento .btn { padding: 10px 15px; font-size: .8rem; }
}