/* ===== Variables de color ===== */
:root{
  --ov-orange: #FF7A00;
  --ov-orange-2:#FF6A00;
  --ov-peach:#F7B48B;
  --ov-gray:#CCCCCC;
  --ov-gray-mid:#D3D3D3;
  --ov-dark:#1E1E1E;
  --ov-bg:#EBECED;
}

@font-face {
  font-family: 'Sora';
  src: url('Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* ya que es variable, cubre de Thin a Black */
  font-style: normal;
}

/* ===== Layout base ===== */
#ov-root, .ov-wrapper{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }
body #ov-root{ background: var(--ov-bg); }
.ov-wrapper{ width: 100%; margin: 0 auto; }

.ov-hero{
  position: relative;
  background: var(--ov-orange);
  color:#fff;
  padding: 20px 18px 72px;
  border-radius: 0 0 28px 28px;
}

h1, h2, h3, h4 {line-height: 1.2 !important;}
.ov-hero-inner{ position: relative; z-index: 2; }
.ov-brand{ display:flex; align-items:center; gap:10px; }
.ov-logo{ height:20px; }
.ov-brand-text{ font-weight:700; letter-spacing:.2px; }
.ov-eyebrow{ font-size:.9rem; opacity:.9; margin-top:8px; }
.ov-hero h1{ font-size:1.35rem; line-height:1.2; margin:6px 0 0; font-weight:800; }
.ov-answer-only .ov-info{
  font-family: Nunito Sans;
font-weight: 400 !important;
font-style: Regular;
font-size: 16px !important;
leading-trim: NONE;
line-height: 1.2;
letter-spacing: 0%;
color: #000000;

}

.ov-curve{
  position:absolute; left:18px; right:18px; bottom:-34px; height:68px;
  background:#EDEED; border-radius:34px;
}

/* Contenido principal */

.ov-main {
    padding: 0px 1px 28px;
    background: #f3f3f3;
    padding-left: 12px;
    padding-right: 12px;
}

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

p#ov-intro-desc {
    padding-left: 16px;
    padding-right: 16px;
}
.et_pb_row.et_pb_row_2 {
    width: 100% !important;
}

/* Tarjeta introductoria superior */
.ov-card {
    background: #fff;
    border-radius: 0px 0px 18px 18px;
    padding: 18px;
    padding-top: 1px;
    margin-top: -5px;
}
.ov-card + .ov-card{ margin-top:14px; }

.ov-intro {
    font-family: Nunito Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    padding-bottom: 50px;
}
/* ===== Progress: puntos conectados con líneas ===== */
/* ====== BARRA DE PROGRESO POR PORCENTAJE ====== */
.ov-progressbar{
  background: #eceff1;
  border-radius: 14px;
  padding: 16px;
  padding-bottom: 0px;
  margin-bottom: 14px;
}
.ov-progressbar-track{
  background: #fff;
  border-radius: 10px;
  height: 12px;
  position: relative;
  overflow: hidden;
}
.ov-progressbar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9966 0%, #ff6600 100%);
  transition: width .25s ease;
}
.ov-progressbar-label{
  text-align: right;
  margin-top: 6px;
  font-weight: 700;
  color: #ff7a00;
}
.ov-progressbar-percent{ font-variant-numeric: tabular-nums; }

/* ====== MODO RESPUESTA: solo texto ====== */
.ov-answer-only .ov-question,
.ov-answer-only .ov-options { display: none !important; }
.ov-answer-only .ov-info { display: block !important; }

/* ====== RESULTADO ====== */
.ov-result-pre{
  text-align: center;
  color: #F96B06;
  font-weight: 700;
  margin: 6px 0 10px;
  font-family: Nunito Sans;
font-weight: 600;
font-style: SemiBold;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;

}
.ov-result-title{
  text-align: center;
  font-size: 28px;
  color: #F96B06;
  margin: 4px 0 12px;
  font-family: Sora;
font-weight: 700;
font-style: Bold;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0.3px;
text-align: center;

}
.ov-result-feedback p {
    /* margin: 0 0 10px 0; */
    line-height: 1.45;
    font-family: Nunito Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    color: #000000;
}

/* (tu resto de estilos puede quedar igual) */

/* ===== Pantallas ===== */
.ov-screens{ margin-top: -5px; }
/* VISIBILIDAD DE PANTALLAS */
.ov-screen{display:none;}
.ov-screen.ov-show{display:block;}

/* MODO RESPUESTA: solo texto */
.ov-answer-only .ov-question,
.ov-answer-only .ov-options { display: none !important; }
.ov-answer-only .ov-info { display: block !important; }



/* Barra de progreso por porcentaje (igual que ya te pasé) */
.ov-progressbar {
    background: #fff;
    border-radius: 14px  14px 0px 0px;
    padding: 16px;
  padding-bottom: 0px;
    margin-bottom: 0px;
}
.ov-progressbar-track{ background:#EBECED;border-radius:10px;height:12px;overflow:hidden; }
.ov-progressbar-fill{ height:100%;width:0%;background:linear-gradient(90deg,#ff9966 0%,#ff6600 100%);transition:width .25s ease; }
.ov-progressbar-label{ text-align:right;margin-top:6px;font-weight:700;color:#ff7a00; }
.ov-progressbar-percent{ font-variant-numeric: tabular-nums; }



/* Preguntas - tarjetas de opción */
.ov-question{ font-size:16px; margin:8px 0 12px; font-weight: bold;  font-family: Nunito Sans; }
.ov-options{ display:grid; gap:12px; margin-top:12px; }

.ov-option input{ display:none; }
.ov-option-card{
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid #CCCCCC; 
  border-radius:8px; 
  padding:14px;
  transition:.2s ease;
   background:#fff;
border-radius: 8px;
padding-top: 12px;
padding-right: 24px;
padding-bottom: 12px;
padding-left: 24px;
gap: 10px;
angle: 0 deg;
opacity: 1;
border-width: 1px;

}
.ov-option:hover .ov-option-card{
  background: linear-gradient(0deg, rgba(255,122,0,0.06), rgba(255,122,0,0.06));
  border-color:#FF9B66;
}
.ov-option input:checked + .ov-option-card {
  position: relative;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Nunito Sans';
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.3px;
}

.ov-option input:checked + .ov-option-card::before {
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 8px;
  padding: 2px; /* grosor del borde */
  background: linear-gradient(90deg, #FF4156 0%, #F68C12 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* radio visual */
.ov-radio{
  width:18px; height:18px; border-radius:50%;
  border:2px solid #FF7A00; box-shadow: inset 0 0 0 4px #fff; margin-top:3px;
}
.ov-option input:checked + .ov-option-card .ov-radio{ background:#FF7A00;
width: 22px; }

/* textos opción */
.ov-text{ display:block; font-size:16px; line-height:1.35; font-family: Nunito Sans; }

/* Títulos / mensajes */
.ov-expl-title{ font-family: Nunito Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0.3px;
 margin:8px 0 10px; 
 color: #000000;  }

/* ===== Acciones ===== */
.ov-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; }
.ov-actions.ov-center{ justify-content:center; }
/*.ov-actions.ov-col{ flex-direction:column; }*/

.ov-btn{
  font-family: Nunito Sans;
  border:none; cursor:pointer; font-weight:700; border-radius:999px;
  padding:12px 22px; font-size:20px; transition:transform .15s ease, box-shadow .15s ease;
   display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
}
.ov-btn:disabled{ opacity:.5; cursor:not-allowed;
background-color: #CCCCCC;
border: none;
}

.ov-btn-ghost{
  background:#fff; 
color: #343A40;
min-width: 168px;
border-radius: 50px;
padding-top: 8px;
padding-right: 24px;
padding-bottom: 8px;
padding-left: 24px;
gap: 10px;
angle: 0 deg;
opacity: 1;
border-width: 2px;
border: 2px solid #343A40;
font-family: Nunito Sans;
font-weight: 800;
font-style: ExtraBold;
font-size: 20px;
leading-trim: NONE;
line-height: 34px;
letter-spacing: 0px;
justify-content: center;


}
.ov-btn-cta{
  background: var(--ov-orange); color:#fff;
min-width: 168px;
border-radius: 50px;
padding-top: 8px;
padding-right: 24px;
padding-bottom: 8px;
padding-left: 24px;
gap: 10px;
angle: 0 deg;
opacity: 1;
border-width: 1px;
border: 1px solid #F96B06;
font-family: Nunito Sans;
font-weight: 800;
font-style: ExtraBold;
font-size: 20px;
leading-trim: NONE;
line-height: 34px;
letter-spacing: 0px;
}
.ov-btn-grad {
    background: linear-gradient(90deg, #FF4156 0%, #F68C12 100%);
    color: #fff;
    font-family: Nunito Sans;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
}
.ov-btn:hover{ transform: translateY(-1px); }
.ov-arrow{ display:inline-block; margin-left:6px; }

h3#q1-title {
    font-family: Nunito Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0.3px;
    color: #000000;
}

/* Resultado */
.ov-result-pre {
    text-align: center;
    color: #F96B06;
    margin: 2px 0 8px;
    font-family: Nunito Sans;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
} 
.ov-result-title{ 
  text-align:center; color:#F96B06; margin:4px 0 12px;
font-family: Sora;
font-weight: 700;
font-style: Bold;
font-size: 24px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0.3px;
text-align: center;

}

/* Bienvenida */
.ov-welcome h2 {
    margin-bottom: 10px;
    font-family: Sora;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0.3px;
    text-align: center;
    vertical-align: bottom;
}
.textod{
  font-family: Nunito Sans;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 150%;
letter-spacing: 0.3px;
color: #000000;

}

#menu-orientador .menu-container {
  background-color: #ebeced;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding: 10px 0;
}

/* Ocultar scrollbar en la mayoría de navegadores */
#menu-orientador .menu-container::-webkit-scrollbar {
  display: none;
}
#menu-orientador .menu-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#menu-orientador .menu-scroll {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 600px;
  gap: 10px;
  padding: 0 15px;
}

#menu-orientador .menu-item {
  display: inline-block;
  background: #ececec;
  border-radius: 60px;
  padding: 20px 40px;
  color: #777;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  flex: 1 1 auto;
  transition: all 0.3s ease;
  white-space: normal;
  line-height: 1.3em;
}

#menu-orientador .menu-item:hover {
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#menu-orientador .menu-item.active {
  background: #fff;
  color: #222;
}

/* --- Múltiple selección (checkbox) --- */
.ov-option--checkbox input { display: none; }

/* Caja del check (cuadrada) */
.ov-option--checkbox .ov-check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--ov-orange);
  background: #fff;
  margin-top: 2px;
  box-shadow: inset 0 0 0 3px #fff;
  flex: 0 0 18px;
}

/* Tarjeta seleccionada: reaprovecha tu borde degradé */
.ov-option--checkbox input:checked + .ov-option-card { position: relative; }
.ov-option--checkbox input:checked + .ov-option-card::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px; padding: 2px;
  background: linear-gradient(90deg, #FF4156 0%, #F68C12 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* check lleno en naranja cuando está marcado */
.ov-option--checkbox input:checked + .ov-option-card .ov-check{
  background: var(--ov-orange);
  border-color: var(--ov-orange);
  box-shadow: inset 0 0 0 4px #fff;
}

/* leve énfasis de fondo al estar marcado (opcional, como en la imagen) */
.ov-option--checkbox input:checked + .ov-option-card{
  background: linear-gradient(0deg, rgba(255,122,0,0.06), rgba(255,122,0,0.06));
}

/* Mantén tipografía/espaciado como tus radios */
.ov-option--checkbox .ov-option-card{
  display:flex; align-items:flex-start; gap:12px;
}

/* Modo respuesta: esconder pregunta y opciones, mostrar solo el texto */
.ov-answer-only .ov-question,
.ov-answer-only .ov-options { display: none !important; }
.ov-answer-only .ov-info { display: block !important; }


.ov-answer-only .ov-info{
  font-family: Nunito Sans;
font-weight: 400 !important;
font-style: Regular;
font-size: 16px !important;
leading-trim: NONE;
line-height: 1.2;
letter-spacing: 0%;
color: #000000;

}

/* Estado de carga del botón Empezar */
.ov-btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .85;
}

/* Spinner dentro del botón */
.ov-btn .ov-spinner{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ov-spin 0.8s linear infinite;
}

@keyframes ov-spin{
  to { transform: rotate(360deg); }
}

/* RESPONSIVE: En móvil se muestra el scroll horizontal */
@media (max-width: 768px) {
#menu-orientador  .menu-scroll {
    justify-content: flex-start;
    min-width: 100%;
  }

#menu-orientador  .menu-item {
    min-width: 80%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #menu-orientador .menu-container {
    background-color: #ebeced;
    justify-content: flex-start;
    display: flex;
    padding-left: 10px; /* asegura que el fondo gris empiece desde el borde */
  }

  #menu-orientador .menu-scroll {
    justify-content: flex-start;
    min-width: 100%;
  }

  #menu-orientador .menu-item {
    min-width: 80%;
    text-align: center;
  }

}
@media (max-width: 500px) {
div#menu-orientador {
    width: px;
    /* position: absolute; */
    /* z-index: 1; */
    left: 0;
    border-radius: 0px 99px 99px 0px;
    width: -webkit-fill-available;
}
.et_pb_module.et_pb_code.et_pb_code_0 {
    padding-right: 20px;
}
.ov-radio {
    width: 60px;
}
.ov-actions {
    flex-direction: column-reverse;
}

button.ov-btn.ov-btn-ghost.ov-restart {
    font-size: 20px;
}
.et_pb_row_0 {
    min-height: 200px !important;
}
.et_pb_column.et_pb_column_4_4.et_pb_column_0.et_pb_css_mix_blend_mode_passthrough.et-last-child {
    margin-bottom: 20px;
}
}

/* Pequeños ajustes responsive */
@media (max-width:360px){
  .ov-hero{ padding:18px 14px 70px; }
  .ov-main{ padding: 0px 14px 24px;
   padding-left: 12px;
    padding-right: 12px; }
}

/* ==== FIX: radios con tamaño fijo y sin “saltos” ==== */
.ov-option-card{
  /* padding consistente en todos los estados */
  padding: 12px 24px !important;
}

/* El círculo del radio: tamaño fijo y reservado en el layout */
.ov-radio{
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;         /* evita que crezca/encoja */
  border-radius: 50%;
  border: 2px solid var(--ov-orange);
  position: relative;
  margin-top: 3px;
  line-height: 1;
}

/* Puntito interior: aparece sin cambiar tamaño del contenedor */
.ov-radio::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ov-orange);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
}

/* Estado seleccionado: NO cambiar width/height del .ov-radio */
.ov-option input:checked + .ov-option-card .ov-radio{
  /* borde y color sí, pero sin modificar dimensiones */
  border-color: var(--ov-orange);
  background: transparent; /* el relleno lo hace ::after */
}

/* Muestra el puntito sin mover nada */
.ov-option input:checked + .ov-option-card .ov-radio::after{
  transform: translate(-50%, -50%) scale(1);
}

/* (opcional) Si quieres mantener el efecto de “borde degradé”, se puede quedar como está,
   pero evita cambiar padding en el estado seleccionado */
.ov-option input:checked + .ov-option-card{
  padding: 12px 24px !important; /* asegura que no cambie */
}