/* style_v2.css - AnalizaTest Redesign */
@font-face {
  font-family: 'acherus_grotesqueblack';
  src: url('font/acherus_grotesque_-_black-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesquebold';
  src: url('font/acherus_grotesque_-_bold-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesqueextrabold';
  src: url('font/acherus_grotesque_-_extrabold-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_extrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesquelight';
  src: url('font/acherus_grotesque_-_light-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesquemedium';
  src: url('font/acherus_grotesque_-_medium-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesqueregular';
  src: url('font/acherus_grotesque_-_regular-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'acherus_grotesquethin';
  src: url('font/acherus_grotesque_-_thin-webfont.woff2') format('woff2'),
    url('font/acherus_grotesque_-_thin-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

:root {
  --primary-orange: #FF8F3D;
  --gradient-top: #FFAA55;
  --gradient-bottom: #FF7022;
  --text-dark: #333333;
  --input-bg-dark: #67571D;
  --input-bg-light: #BAA765;
  --text-white: #FFFFFF;
  --error-color: #E74C3C;
  --btn-orange: #EC7425;
  --btn-orange-hover: #D84D1B;
}

body {
  font-family: 'acherus_grotesqueregular';
  margin: 0;
  padding: 0;
  background: radial-gradient(206.51% 59.72% at 50% 50%, #FDCF7E 0%, #EC7425 99.04%);
  min-height: 100vh;
  color: var(--text-dark);
}

button,
input,
optgroup,
select,
textarea {
  font-family: 'acherus_grotesqueregular';
}

/* Common Text Utilities */
.text-center {
  text-align: center;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* -------------------------------- */
/* Screen 1: Registration Form      */
/* -------------------------------- */
.logo-registro {
  display: flex;
  justify-content: center;
  padding-top: 6vh;
  padding-bottom: 20px;
  margin-bottom: 0;
}

.logo-registro img {
  width: 100%;
  max-width: 171px;
  object-fit: contain;
}

.bienvenida {
  text-align: center;
  color: #67571D;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}

/* Custom Inputs */
.formulario {
  max-width: 298px;
  margin: 0 auto;
}

.inputs input[type="text"],
.inputs input[type="email"],
.inputs input[type="tel"],
.input select {
  width: 100%;
  background-color: var(--input-bg-dark) !important;
  color: var(--text-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px !important;
  height: 56px !important;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
  box-shadow: none !important;
  margin-bottom: 8px;
}

.inputs input::placeholder {
  color: var(--text-white) !important;
  opacity: 1;
}

/* Custom Select Dropdown Styling */
.custom-select-wrapper select {
  display: block !important;
  width: 100%;
  background-color: var(--input-bg-dark) !important;
  color: var(--text-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px !important;
  height: 56px !important;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
  cursor: pointer;
}

/* Remove Materialize default select styles conflicting */
.select-wrapper {
  display: none !important;
}

.custom-select-wrapper .select-wrapper {
  display: block !important;
}

.custom-select-wrapper .select-wrapper input {
  display: none !important;
}

.custom-select-wrapper .select-wrapper svg {
  display: none !important;
}

.custom-select-wrapper .select-wrapper ul {
  display: none !important;
}

/* Handle input focus to match dropdown / mockup colors */
.inputs input[type="text"]:focus,
.inputs input[type="email"]:focus,
.inputs input[type="tel"]:focus,
.custom-select-wrapper select:focus {
  background-color: var(--input-bg-light) !important;
  color: var(--text-white) !important;
  border: 1px solid var(--input-bg-dark) !important;
  box-shadow: none !important;
  outline: none !important;
}

.check {
  margin-top: 30px;
  text-align: center;
}

.check label {
  color: var(--text-dark) !important;
  /* using dark color for readability */
  font-size: 0.75rem;
  line-height: 1.4;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  text-align: left;
}

.check label input[type="checkbox"] {
  position: relative !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--input-bg-light);
  cursor: pointer;
  flex-shrink: 0;
}

.check label span.terms-text {
  color: var(--text-white) !important;
  font-size: 10px;
  line-height: 10px;
  display: flex;
  align-items: center;
}

.check a {
  color: var(--text-white);
  text-decoration: none;
}

.check a:hover {
  text-decoration: underline;
}

[type="checkbox"]+span:not(.lever) {
  height: auto;
}

[type="checkbox"]+span:not(.lever):before {
  border: none;
  background-color: #BAA765;
  box-shadow: -2px 2px 4px 0px #00000040 inset;
  width: 24px;
  height: 24px;
}

[type="checkbox"]:checked+span:not(.lever):before {
  background-color: inherit;
  box-shadow: inherit;
}

/* Buttons */
.enviar {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.boton-seguir {
  text-align: center;
}

.btn-enviar {
  background-color: var(--btn-orange) !important;
  color: white !important;
  font-weight: 900;
  font-size: 20px;
  padding: 8px 16px;
  height: 41px;
  border-radius: 8px !important;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  font-family: 'acherus_grotesqueextrabold';
}

/* Footer / Branding */
footer {
  text-align: center;
  padding-bottom: 30px;
}

footer img {
  width: 150px;
  opacity: 0.8;
}

/* Base Overrides for Materialize */
.select-wrapper {
  display: none !important;
}

/* Desktop Adjustments */
@media (min-width: 768px) {

  .logo-registro img,
  .logo-index img {
    width: 350px;
  }
}

/* -------------------------------- */
/* Screen 2 & 3: Preguntas (Split)  */
/* -------------------------------- */
.split-wrapper {
  position: fixed;
  top: -20dvh;
  /* Moved higher up as requested */
  left: 0;
  width: 100vw;
  height: 120dvh;
  /* Compansate for the top offset */
  overflow: hidden;
  display: block;
  background-color: transparent;
  z-index: 0;
  max-width: 420px;
  right: 0;
  margin: 0 auto;
}

/* The revealed central image — scale up from nothing */
.question-image {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 11;
  width: 80%;
  max-width: 360px;
  opacity: 0;
  transition: transform 0.8s ease 1.2s, opacity 0.8s ease 1.2s;
  pointer-events: none;
}

.question-image img {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
  border-radius: 12px;
}

/* Splitting halves — using 50/50 split for clean center reveal */
.split-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 43.1%;
  /* Minimal overlap to avoid 1px gap while preventing 'crossing' */
  overflow: hidden;
  z-index: 10;
  transition: transform 2.5s cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: top;
}

.split-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 57%;
  /* Minimal overlap to avoid 1px gap while preventing 'crossing' */
  overflow: hidden;
  z-index: 10;
  transition: transform 2.5s cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: bottom;
}

/* Face images — using object-fit: contain to avoid zoom distortion */
.face-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.split-top .face-img {
  object-position: bottom center;
  /* Align to the split line */
}

.split-bottom .face-img {
  object-position: top center;
  /* Align to the split line */
}

/* Split animation: faces slide apart just enough to show the central question image */
.is-split .split-top {
  transform: translateY(-30%);
}

.is-split .split-bottom {
  transform: translateY(25%);
}

/* Reveal central image with scale when split happens */
.is-split .question-image {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* The card at the bottom — always visible, no entrance animation */
.question-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 20;
  background-color: #FDCF7E;
  border-radius: 32px 32px 0 0;
  border: 4px solid #FFFFFF;
  border-bottom: none;
  padding: 30px;
  width: 100%;
  text-align: center;
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 250px;
}

/* Card inner texts */
.texto-pregunta {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* Custom logo sizes for the different screens */
.logo-registro img,
.logo-index img,
.logo-pregunta img,
.logo-resultado img {
  width: 100%;
  max-width: 171px;
  object-fit: contain;
}

.img-pregunta img {
  max-width: 150px;
  margin-bottom: 20px;
  border-radius: 10px;
}

/* Navigation & SI/NO */
.respuestas {
  width: 100%;
  margin-top: auto;
  margin-bottom: 50px;
}

.respuesta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  position: relative;
}

.btn-answer {
  background-color: #EC7425;
  /* Boton SI Orange */
  color: white;
  border: 1px solid transparent;
  padding: 8px 42px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0px 4px 4px 0px #00000040;
  transition: all 0.2s ease-in-out;
}

.btn-answer:hover,
.btn-answer:focus {
  border: 1px solid #FFFFFF;
}

.btn-answer.btn-no {
  background-color: #3F4727;
  /* Dark green for NO */
}

.btn-answer.btn-no:hover,
.btn-answer.btn-no:focus {
  border: 1px solid #FFFFFF;
}

/* Navigation arrows beside the buttons */
.nav-arrow {
  position: absolute;
  top: 120%;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow::before {
  content: '';
  display: block;
  background-image: url('img/right-chevron.svg');
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-arrow.prev {
  left: 0;
  transform: rotate(180deg);
}

.nav-arrow.prev[disabled] {
  opacity: 0.2;
}

.nav-arrow.next {
  right: 0;
}

/* Cleaned up redundant navigation arrow rules */


/* Dynamic backgrounds for split wrapper depending on gender (assigned via JS or PHP) */
.bg-orange .split-half {
  background-image: url('../img/boy-top.png');
  /* We will use Javascript to inject the correct halves based on the original image */
}

/* -------------------------------- */
/* Screen 4: Resultado              */
/* -------------------------------- */
.resultado-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}

/* --- Background colors per result type --- */
.result-wow {
  background: radial-gradient(95.09% 50% at 50% 50%, #FDCF7E 0%, #F1A25E 100%);
}

.result-super {
  background: radial-gradient(122.2% 50% at 50% 50%, #00A8A6 50.96%, #008FC7 94.23%);
}

.result-omg {
  background: linear-gradient(180deg, #BAA765 22.57%, #CABA83 73.54%);
}

/* --- Logo --- */
.resultado-logo {
  padding-top: 30px;
  padding-bottom: 10px;
  width: 100%;
}

.resultado-logo img {
  width: 162px;
}

/* --- Emoji GIF --- */
.resultado-emoji {
  margin: 0;
}

.emoji-gif {
  width: 230px;
  display: block;
  margin: 0 auto;
}

/* --- Title image (wow / súper / omg) --- */
.resultado-titulo {
  margin: 0 0 5px 0;
}

.img-title {
  width: auto;
  height: 92px;
  display: block;
  margin: 0 auto;
}

/* --- Description text --- */
.resultado-texto {
  font-size: 16px;
  max-width: 162px;
  margin: 0 auto 16px;
  color: #3F4727;
  text-align: center;
  font-weight: 700;
}

.resultado-texto strong {
  font-weight: 1000;
  font-family: 'acherus_grotesqueextrabold';
}

.result-super .resultado-texto {
  color: #ffffff;
}

.result-super .img-title {
  height: 121px;
}

.result-omg .resultado-texto {
  max-width: 177px;
}

/* --- Career cards list --- */
.carreras-lista {
  width: 100%;
  max-width: 181px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  margin-top: 10px;
}

/* Career card item */
.item-resultado {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.item-resultado .btn-principal {
  border-radius: 8px;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 8px;
  color: white;
  font-weight: 700;
  font-size: 10px;
}

.item-resultado:nth-child(1) .btn-principal {
  background-color: #EC7425;
}

.item-resultado:nth-child(2) .btn-principal {
  background-color: #29275A;
}

.item-resultado:nth-child(3) .btn-principal {
  background-color: #3F4727;
}

/* Ribbon icon inside the card */
.item-resultado i::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-image: url('../img/icon-button.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.item-resultado .btn-more {
  font-size: 12px;
  font-weight: 700;
  color: #3F4727;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 1px;
}

.item-resultado .btn-more::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-image: url('../img/icon-more.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.result-super .item-resultado .btn-more {
  color: white;
}

.result-super .item-resultado .btn-more::after {
  background-image: url('../img/icon-more-white.svg');
}

/* --- University logo at bottom --- */
.resultado-university {
  margin-top: auto;
  padding: 0;
}

.resultado-university img {
  width: 130px;
}