@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');
.iu-tv { max-width: 800px; margin: 0 auto; font-size: 17px; line-height: 1.5; scroll-margin-top: 120px; }
.iu-tv-maintitle { font-size: 2.6rem; line-height: 1.12; font-weight: 800; margin: 0 0 1.2rem; color: #0C1336; }
.iu-tv-screen { display: none; }
.iu-tv-screen.is-active { display: block; }
.iu-tv-title { font-size: 1.8rem; margin: 0 0 .5em; }
.iu-tv-form label { display: block; margin: 0 0 1rem; font-weight: 600; }
.iu-tv-form input[type=text], .iu-tv-form input[type=email] { width: 100%; padding: .7em; font-size: 1rem; border: 1px solid #cfcfcf; border-radius: 8px; box-sizing: border-box; margin-top: 10px; }
.iu-tv-form input::placeholder { opacity: .5; }
.iu-tv-consent { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.iu-tv-consent input { margin-top: .25rem; }
.iu-tv-hp { display: none; }
.iu-tv-errors { color: #b5121b; min-height: 1.2em; margin: .25rem 0; }
/* Buttons — two categories, forced with !important to beat the theme's link/button styles.
   Primary = forward actions (Comenzar / Siguiente / Ver mi resultado / Ver los cursos / Mirá las carreras): solid dark.
   Secondary = go-back actions (Volver / Ir al blog): outline. */
.iu-tv .iu-tv-btn { display: inline-block !important; font-family: "Manrope", sans-serif !important; font-weight: 600 !important; background-color: #0A0E27 !important; color: #FFFFFF !important; border: none !important; padding: 16px 28px !important; font-size: 1rem !important; border-radius: 72px !important; cursor: pointer !important; text-decoration: none !important; }
.iu-tv .iu-tv-btn:hover { background-color: #2B4BF2 !important; color: #FFFFFF !important; border: none !important; }
.iu-tv .iu-tv-btn[disabled] { opacity: .5 !important; cursor: default !important; }
.iu-tv .iu-tv-btn--start { background-color: #0A0E27 !important; color: #FFFFFF !important; border: none !important; }
/* Secondary (Volver / Ir al blog) — placed after so its hover border wins over the base */
.iu-tv .iu-tv-btn--ghost, .iu-tv .iu-tv-back { background-color: transparent !important; color: #0A0E27 !important; border: 1px solid #0A0E27 !important; }
.iu-tv .iu-tv-btn--ghost:hover, .iu-tv .iu-tv-back:hover { background-color: #2B4BF2 !important; color: #FFFFFF !important; border: 1px solid #2B4BF2 !important; }
.iu-tv-quiz-title { font-size: 1.4rem; margin: 0 0 .8rem; }
.iu-tv-progress { background: #eee; border-radius: 99px; height: 10px; overflow: hidden; margin: 0 0 .5rem; }
.iu-tv-progress-bar { display: block; height: 100%; width: 0; background: #b5121b; transition: width .25s ease; }
.iu-tv-progress-meta { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1.2rem; }
.iu-tv-section-name { text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: #888; }
.iu-tv-step-count { font-size: .85rem; color: #888; font-weight: 600; white-space: nowrap; }
.iu-tv-qtext { font-size: 1.2rem; font-weight: 600; }
/* Question header: icon + heading / prompt / instruction */
.iu-tv-qhead { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.2rem; }
.iu-tv-qicon { flex: 0 0 auto; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(12,19,54,.07); border-radius: 14px; color: #0C1336; }
.iu-tv-qicon svg { width: 32px; height: 32px; }
.iu-tv-qhead-text { flex: 1 1 auto; min-width: 0; }
.iu-tv-qheading { font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; color: #0C1336; }
.iu-tv-qprompt { font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; }
.iu-tv-qinstruction { font-size: .95rem; font-weight: 400; color: #666; margin: 0; }
.iu-tv-multi { font-weight: 400; font-size: .85rem; color: #888; }
.iu-tv-options { list-style: none; padding: 0; margin: 1rem 0; }
.iu-tv-options li { margin: 0 0 .6rem; }
.iu-tv-options label { display: flex; gap: .6rem; align-items: flex-start; padding: .8em 1em; border: 1px solid #e3e3e3; border-radius: 10px; cursor: pointer; line-height: 1.4em; }
.iu-tv-options label:hover { border-color: #b5121b; background: #fff5f5; }
/* Desktop: lay text options out in 2 columns so long questions need less scrolling.
   (Image questions use their own grid below and are left untouched.) */
@media (min-width: 601px) {
  .iu-tv-options:not(.iu-tv-options--grid) { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
  .iu-tv-options:not(.iu-tv-options--grid) li { margin: 0; }
  .iu-tv-options:not(.iu-tv-options--grid) label { height: 100%; box-sizing: border-box; }
}
/* Image grid (Q3 / Q8) */
.iu-tv-options--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.iu-tv-options--grid li { margin: 0; }
.iu-tv-options--grid label { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.iu-tv-opt-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.iu-tv-options--grid label > span { padding: .55em .7em; font-size: .88rem; line-height: 1.3; }
.iu-tv-options--grid input { position: absolute; top: .5rem; left: .5rem; width: 1.15rem; height: 1.15rem; accent-color: #b5121b; border-radius: 3px; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.iu-tv-options--grid label:has(input:checked) { border-color: #b5121b; box-shadow: 0 0 0 2px #b5121b inset; }
@media (max-width: 600px) { .iu-tv-options--grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

/* About / instructions screen */
.iu-tv-about-intro { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.3rem; }
.iu-tv-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.iu-tv-card { color: #fff; padding: 1.3rem; border-radius: 12px; }
.iu-tv-card h3 { margin: 0 0 .6rem; color: #fff; font-size: 1.25rem; }
.iu-tv-card p { margin: 0; font-size: .95rem; line-height: 1.5; }
.iu-tv-card--1 { background: #0C1336; }
.iu-tv-card--2 { background: #0F1849; }
.iu-tv-card--3 { background: #121C56; }
.iu-tv-swipe-hint { display: none; }
.iu-tv-about-nav { margin-top: 1.5rem; text-align: center; }

/* Result CTAs (cursos / blog) */
.iu-tv-cta { margin-top: 2rem; padding: 1.4rem; border-radius: 12px; background: #eef2ff; text-align: center; }
.iu-tv-cta p { margin: 0 0 .9rem; font-weight: 600; font-size: 1.05rem; }
.iu-tv-cta--secondary { margin-top: 1rem; background: #f6f6f6; }
.iu-tv-cta--secondary p { font-weight: 400; }
.iu-tv-nav { display: flex; justify-content: space-between; gap: 1rem; }
.iu-tv-area { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid #eee; border-radius: 12px; }
.iu-tv-area h3 { background: #b5121b; color: #fff; padding: .4em .7em; border-radius: 8px; display: inline-block; }
.iu-tv-balance { font-weight: 600; }
.iu-tv-chart { margin-top: 2rem; }
.iu-tv-bar-row { display: flex; align-items: center; gap: .8rem; margin: .35rem 0; }
.iu-tv-bar-label { flex: 0 0 42%; font-size: .85rem; text-align: right; }
.iu-tv-bar { flex: 1; background: #eee; border-radius: 99px; height: 14px; overflow: hidden; }
.iu-tv-bar > span { display: block; height: 100%; background: #b5121b; }
@media (max-width: 600px) {
  .iu-tv { font-size: 16px; }
  .iu-tv-bar-label { flex-basis: 50%; }
  .iu-tv-maintitle { font-size: 2rem; }
  .iu-tv-qicon { width: 48px; height: 48px; border-radius: 12px; }
  .iu-tv-qicon svg { width: 26px; height: 26px; }
  .iu-tv-qheading { font-size: 1.2rem; }
  .iu-tv-qprompt { font-size: 1.05rem; }
}