/* TSM Tests Template — visibilidad por estado (data-state en .tsm-test)
 * Estados: info | login | test | cart | unlocked
 */

.tsm-test { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* Piezas que solo aparecen en su estado */
.tsm-only-info, .tsm-only-login, .tsm-only-test, .tsm-only-cart, .tsm-only-unlocked { display: none; }

.tsm-test[data-state="info"]  .tsm-only-info  { display: block; }
.tsm-test[data-state="login"] .tsm-only-login { display: block; }
.tsm-test[data-state="test"]  .tsm-only-test  { display: block; }
.tsm-test[data-state="cart"]  .tsm-only-cart  { display: block; }
.tsm-test[data-state="unlocked"] .tsm-only-unlocked { display: block; }

/*
 * Gravity Forms empieza con el wrapper oculto para evitar un parpadeo mientras
 * lo inicializa. Si el formulario vive en una zona inicialmente oculta, algunos
 * optimizadores no retiran ese estilo. En el estado "test" debe prevalecer la
 * acción explícita de la persona usuaria.
 */
.tsm-test[data-state="test"] .tsm-only-test .gform_wrapper,
.tsm-test[data-state="test"] .tsm-only-test .gform_legacy_markup_wrapper { display: block !important; }
.tsm-test[data-state="test"] .tsm-only-test .gform_wrapper form,
.tsm-test[data-state="test"] .tsm-only-test .gform_legacy_markup_wrapper form { opacity: 1 !important; }

/* Al comprar (unlocked): se oculta todo el bloque previo, solo quedan los vídeos de pago */
.tsm-test[data-state="unlocked"] .tsm-pre { display: none; }

/* Tipografía */
.tsm-hero { text-align: center; margin-bottom: 2rem; }
.tsm-hero__title { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; }
.tsm-hero__subtitle { font-size: 1.15rem; opacity: .8; margin: 0; }
.tsm-section { margin: 2rem 0; }
.tsm-section__title { font-size: 1.5rem; margin: 0 0 .75rem; }
.tsm-section__text { font-size: 1.05rem; line-height: 1.6; }

.tsm-encuentra { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.tsm-encuentra--full { grid-template-columns: 1fr; }
.tsm-img { max-width: 100%; height: auto; border-radius: 8px; }
@media ( max-width: 700px ) { .tsm-encuentra { grid-template-columns: 1fr; } }

.tsm-video { width: 100%; margin: 1rem 0; }

/* Deja el inicio del formulario visible bajo la cabecera fija al abrirlo. */
#tsm-form { scroll-margin-top: 110px; }

.tsm-cta { text-align: center; margin: 2.5rem 0 0; }
.tsm-login-notice { text-align: center; }

.tsm-btn {
	display: inline-block; padding: .8rem 1.75rem; font-size: 1.05rem; font-weight: 600;
	color: #fff !important; background: #1a73e8; border: none; border-radius: 999px;
	text-decoration: none; cursor: pointer; transition: background .15s ease; margin: .25rem;
}
.tsm-btn:hover { background: #155ab6; }

/* El tema puede dar prioridad a los estilos globales de button. Esta regla
 * garantiza que el CTA principal sea un botón relleno, no solo un borde. */
.tsm-test button.tsm-btn:not(.tsm-btn--ghost),
.tsm-test a.tsm-btn:not(.tsm-btn--ghost) {
	appearance: none; -webkit-appearance: none;
	background-color: #1a73e8 !important; background-image: none !important;
	border: 2px solid #1a73e8 !important; color: #fff !important;
	box-shadow: 0 5px 14px rgba( 26, 115, 232, .24 ); opacity: 1 !important;
	visibility: visible !important;
}
.tsm-test button.tsm-btn:not(.tsm-btn--ghost):hover,
.tsm-test button.tsm-btn:not(.tsm-btn--ghost):focus,
.tsm-test a.tsm-btn:not(.tsm-btn--ghost):hover,
.tsm-test a.tsm-btn:not(.tsm-btn--ghost):focus {
	background-color: #155ab6 !important; border-color: #155ab6 !important;
	color: #fff !important;
}
.tsm-btn--ghost { background: transparent; color: #1a73e8 !important; border: 2px solid #1a73e8; }
.tsm-btn--ghost:hover { background: #eef4ff; }

.tsm-compra { text-align: center; margin-top: 2.5rem; }
.tsm-compra__title { font-size: 1.4rem; margin: 0 0 1rem; }
.tsm-compra__intro { margin: 0 auto 1.25rem; max-width: 620px; }
.tsm-compra__unlocks { display: inline-block; max-width: 620px; margin: 0 auto 1.25rem; text-align: left; }
.tsm-compra__unlocks li { margin: .4rem 0; }
.tsm-access-notice { max-width: 680px; margin: 1.25rem auto; padding: 1rem 1.15rem; text-align: left; background: #fff7e8; border-left: 4px solid #d98900; border-radius: 6px; }
.tsm-retry { margin: 1.25rem 0; }
.tsm-retry p { margin: .65rem 0 0; }
.tsm-product-description {
	max-width: 680px; margin: 1.75rem auto 0; padding: 1.25rem; text-align: left;
	border: 1px solid #e0e0e0; border-radius: 12px;
}
.tsm-product-description h3 { margin-top: 0; }

.tsm-personal-result {
	max-width: 680px; margin: 1.5rem auto 2rem; padding: 1.5rem; text-align: center;
	background: #f4f8ff; border: 2px solid #1a73e8; border-radius: 14px;
}
.tsm-personal-result__title { margin: 0 0 .75rem; font-size: 1.55rem; }
.tsm-personal-result__score { margin: 0 0 1rem; font-size: 1.2rem; }
.tsm-personal-result__content img { display: block; max-width: 100%; height: auto; margin: 1rem auto 0; }
.tsm-personal-result__content .tsm-result-indicator { width: min( 620px, 100% ); }

.tsm-atc { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.tsm-atc__price { font-size: 1.25rem; font-weight: 600; }
.tsm-atc__btn {
	display: inline-block; padding: .8rem 1.75rem; font-size: 1.05rem; font-weight: 600;
	color: #fff !important; background: #1a73e8; border-radius: 999px; text-decoration: none;
}
.tsm-atc__btn:hover { background: #155ab6; }
.tsm-atc--border { border: 1px solid #e0e0e0; border-radius: 12px; padding: 1.25rem 1.5rem; }

.tsm-unlocked { margin-top: 1rem; }
.tsm-access-actions { max-width: 760px; margin: 2rem auto; text-align: center; }
.tsm-buy-again { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
.tsm-buy-again h3 { margin: 0 0 .5rem; }

/* Navegación entre los dos vídeos privados tras desbloquear el resultado. */
.tsm-paid-videos { margin: 1.5rem 0; }
.tsm-video-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0 0 1rem; }
.tsm-test .tsm-video-nav__button {
	appearance: none; -webkit-appearance: none; padding: .7rem 1.25rem;
	color: #1a73e8; background: #fff; border: 2px solid #1a73e8; border-radius: 999px;
	font: inherit; font-weight: 600; cursor: pointer;
}
.tsm-test .tsm-video-nav__button.is-active,
.tsm-test .tsm-video-nav__button:hover,
.tsm-test .tsm-video-nav__button:focus {
	color: #fff; background: #1a73e8; border-color: #1a73e8;
}
.tsm-paid-video[hidden] { display: none; }

html { scroll-behavior: smooth; }