/* Estructura básica */
html,
body {
  margin: 0;

}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.spacer {
  width: 40px; /* mismo ancho del botón Back para equilibrar */
}



/* -------------------- */
/* Fuentes Bree */
/* -------------------- */

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeRegular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeBold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeExtrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeThin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Bree';
  src: url('../assets/fonts/Bree/BreeSemibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Bree Oblique';
  src: url('../assets/fonts/Bree/BreeOblique_Reg.otf') format('opentype');
  font-weight: normal;
  font-style: oblique;
}

/* -------------------- */
/* Fuentes Inter */
/* -------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/INTER/Inter-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}


h1 {
  font-family: 'Bree', sans-serif;
  color: #CE0058 !important;
  margin-bottom: 1rem;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px;
  /* 130% */
}

h2 {
  font-family: 'Bree', sans-serif;
  font-weight: 500;
  font-size: 36px;
  color: #CE0058 !important;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (max-width: 576px) {
  h2 {
    font-size: 24px;
  }
}


h3 {
  font-family: 'Bree', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: #CE0058 !important;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h4 {
  font-family: 'Bree', sans-serif;
  font-weight: 500 !important;
  font-size: 24px;
  color: #CE0058 !important;
  line-height: 1.2;
  margin-bottom: 30px;
}

@media (min-width: 576px) {
  h4 {
    font-size: 28px;
  }
}

p {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  /* 180% */
}

.text-title-back {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.text-preguntas {
  font-family: 'Inter', sans-serif;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

.text-feedback {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .text-feedback {
    margin-bottom: 78px;
  }
}

.text-avance-progress {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 16px;
}

.text-logro {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.text-number {
  font-family: 'Bree', sans-serif;
  color: #CE0058;
  text-align: center;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

.text-aciertos {
  font-family: 'Inter', sans-serif;
  color: #5E6A71;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-transform: uppercase;
}

.title-h3 {
  font-family: 'Bree', sans-serif !important;
  color: #CE0058 !important;
  font-size: 32px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 48px !important;
}

.text-ty {
  font-family: 'Inter', sans-serif;
  color: #252A2D;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
}

.option-text {
  font-family: 'Inter', sans-serif;
  color: #000;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  /* 137.5% */
}

.text-link {
  color: #CE0058;
  font-size: 14px;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.color-cb {
  color: #CE0058;
}

.footer {
  background-color: #fff;
  border-top: 1px solid #D8DADA;
}

.f-14 {
  font-size: 14px;
}


.mb-75-mobile {
  margin-bottom: 75px;
}

@media (min-width: 576px) {
  .mb-75-mobile {
    margin-bottom: 0;
  }
}

/* Imagen sin margen/padding y que ocupe todo el alto */
.fraud-image {
  object-fit: cover;
  object-position: left;
  border-radius: 14px 0px 0px 12px;
  height: 100%;
  width: 100%;
  display: block;
  margin-top: 0;
  padding-top: 0;
}

/* En mobile (hasta 767px) quitamos el border-radius */
@media (max-width: 767px) {
  .fraud-image {
    border-radius: 0;
  }
}

/* En mobile: asegura que esté pegada al top tras el navbar */
@media (max-width: 767px) {
  .fraud-image:first-child {
    margin-top: 0 !important;
  }
}


/* Fondo blanco por defecto en mobile */
.fraud-content {
  background-color: #f6f6f6;
}

@media (max-width: 767px) {
  .overflow-active {
  overflow: auto;
  /* 1. Intentamos usar el nuevo dynamic-viewport height */
  height: 90dvh;
  /* 2. Caída en iOS Safari */
  height: -webkit-fill-available;
  /* 3. Fallback clásico que sí funciona casi en todas partes */
  height: 90vh;

  /* para scroll “suave” en iOS */
  -webkit-overflow-scrolling: touch;
}

}



@media (max-width: 767px) {
  .bk-white {
    background-color: #ffffff;
  }
}


/* Fondo gris solo en desktop */
@media (min-width: 768px) {
  .fraud-content {
    background-color: #f6f6f6;
    border-radius: 4px 12px 12px 4px;
  }
}

/* Título con color institucional magenta */
.highlight-title {
  color: #c30067;
  font-weight: 700;
}

/* Botón magenta con texto blanco */
.btn-start-test {
  background-color: #CE0058;
  font-family: 'Inter', sans-serif;
  color: white;
  display: flex;
  width: 300px;
  height: 58px;
  text-decoration: none;
  font-weight: 600;
  line-height: 18px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 80px;
  background: #CE0058;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-start-test:hover,
.btn-start-test:focus {
  background-color: #910048 !important;
  color: white;
}

/* Estado deshabilitado */
.btn-start-test.disabled,
.btn-start-test:disabled {
  background-color: #D8DADA;
  border-color: #D8DADA;
  color: #949C9F;
  cursor: not-allowed;
}



.btn-outline-test {
  background-color: #fff;
  font-family: 'Inter', sans-serif;
  color: #CE0058;
  display: flex;
  text-decoration: none;
  width: 300px;
  height: 58px;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  /* 100% */
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 80px;
  border: 2px solid #CE0058;
  cursor: pointer;
  transition: all 0.3s ease;
}


@media (max-width: 767px) {
  .btn-outline-test {
    width: 100%;
    border-radius: 50px;
    font-size: 1rem;
  }
}

.btn-outline-test:hover,
.btn-outline-test:focus {
  background-color: #ffffff;
  color: #910048;
  border-color: #910048;
}

/* Estado deshabilitado */
.btn-outline-test.disabled,
.btn-outline-test:disabled {
  background-color: #fff;
  border-color: #D8DADA;
  color: #949C9F;
  cursor: not-allowed;
}



@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1000px;
  }
}

/* Mobile: quitar padding lateral y superior */
@media (max-width: 767px) {
  .container-fraud {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .container-fraud {
    min-height: 60vh;
    /* Altura igual al alto de la pantalla */
    display: flex;
    /* Activamos Flexbox */
    align-items: center;
    /* Centramos verticalmente */
    justify-content: center;
    /* Centrado horizontal extra (por si acaso) */
  }
}


/* Wrapper para que el botón flote en mobile */
@media (max-width: 767px) {
  .start-test-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 2px solid #EFEFEF;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
    border-radius: 60px 60px 0 0;
    padding: 1rem;
    z-index: 10001;

    /* --- FIX AÑADIDO --- */
    min-height: 90px; 
    box-sizing: border-box; /* Buena práctica para asegurar que el padding se incluya correctamente */
  }

  .btn-start-test {
    width: 100%;
    border-radius: 50px;
    font-size: 1rem;
  }
}



.mt-mb-75 {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* En mobile (máximo 767px de ancho) se anulan los márgenes */
@media (max-width: 767px) {
  .mt-mb-75 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}


/* ------------------------------------------------ */
/* MARK: SideNav mobile overlay + ocultar nav y footer    */
/* ------------------------------------------------ */
/* ————————————————
   Transición para empujar el contenido
   ———————————————— */
#main-content {
  transition: transform 0.4s ease-in-out;
}

/* ————————————————
   1) Todos los pasos ocultos por defecto
   ———————————————— */
.step-content {
  display: none;
}

/* ————————————————
   2) Desktop (≥768px): inline estático
   ———————————————— */
@media (min-width: 768px) {
  .step-content.active {
    display: block;
  }
}



/* ———————————————————————
   3) Mobile (<768px): slide‑in + push (solo pasos ≠ #step-1)
   ——————————————————————— */
@media (max-width: 767px) {

  /* El paso 1: siempre inline */
  #step-1 {
    display: block !important;
    transform: none !important;
    width: 100%;
    height: auto;
    transition: none;
  }

  /* Pasos 2–11: el panel que desliza */
  .step-content:not(#step-1) {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    overflow-y: auto;
    /* Fallbacks progresivos */
    height: 100vh;
    /* para navegadores antiguos */
    height: 100dvh;
    /* para navegadores modernos (iOS 15.4+ y Android) */
    height: calc(var(--real-vh, 1vh) * 100);
    /* para iOS antiguos con JS */

    overflow: hidden;
    overflow-y: auto;
    background-color: #f6f6f6;
    padding-bottom: 60px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 10000;
    overscroll-behavior-y: contain;
  }



  /* Cuando estén activos, entran y empujan */
  .step-content:not(#step-1).active {
    display: block !important;
  }



  /* Empuja el contenido principal solo cuando un paso ≥2 está activo */
  body.side-open #main-content {
    transform: translateX(-100%);
  }

  /* Oculta nav y footer mientras el panel está abierto */
  body.side-open {
    overflow: hidden;
  }

  body.side-open nav,
  body.side-open footer {
    display: none !important;
  }
}




/* MARK: progressbar class */
.progress-backrd {
  height: 4px;
  background-color: #FEE0EC;
  border-radius: 8px;
}

.progress-active {
  background-color: #CE0058;
}

/* MARK: radio buttons */

.option-btn {
  border-radius: 8px;
  border: 2px solid #D8DADA;
  background: #FFF;
  cursor: pointer;
  max-height: 146px;
  min-height: 146px;
  text-align: left;
  margin-top: 16px;
  transition: border 0.3s ease;
}

@media (max-width: 767px) {
  .option-btn {
    max-height: 88px;
    min-height: 88px;
  }
}


.option-btn.selected {
  border-color: #CE0058;
}

.option-btn.validated {
  border-color: #39B54D;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.option-btn.error {
  border-color: #F21E11;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.radio-indicator {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #B0B0B0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Color magenta cuando está seleccionado */
.option-btn.selected .radio-indicator {
  border-color: #CE0058;
}

/* En mobile (hasta 767px), reducir el width a 20px */
@media (max-width: 767px) {
  .radio-indicator {
    width: 20px;
  }
}



.option-btn.selected .radio-circle {
  width: 10px;
  height: 10px;
  background-color: #CE0058;
  border-radius: 50%;
}

.option-btn:disabled {
  color: #000 !important;
}

.option-btn:disabled * {
  color: #000 !important;
}

.w-90 {
  width: 80%;
}

/* MARK: felicidades html */

/* Contenedor centrado y con ancho fijo solo en desktop */
/* Contenedor general */
.container-main {
  margin: 0 auto;
  max-width: 600px;
}

/* Contenido textual con padding en mobile */
.content-inner {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .content-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .responsive-text {
    text-align: left;
  }

  .header-img-wrapper,
  .no-padding-mobile {
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 768px) {
  .content-inner {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .responsive-text {
    text-align: center;
  }

  .btn-start-test,
  .btn-outline-test {
    margin-left: auto;
    margin-right: auto;
  }

  .result-box {
    max-width: 320px;
  }
}

/* Caja de aciertos */
.result-box {
  background-color: #F6F6F6;
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
}

.b-8 {
  border-radius: 8px;
}

.mb-40 {
  margin-bottom: 70px;
}

.mt-40 {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .mt-40 {
    margin-top: 0px !important;
  }
}

.mt-32 {
  margin-top: 32px;
}

@media (max-width: 767px) {
  .mt-32 {
    margin-top: 0px !important;
  }
}

.content-inner {
  padding-top: 0rem;
  padding-bottom: 1.5rem;
}