/* ============================================================
   PsicoTests · base.css
   Variables candy, tipografías, botones, chips, logo, migas,
   barras de nivel de 10 puntos y utilidades comunes.
   ============================================================ */

:root {
	/* Paleta candy */
	--pt-coral: #ff6b6b;
	--pt-coral-dark: #e14e5c;
	--pt-coral-soft: #ffe3e3;
	--pt-sky: #38bdf8;
	--pt-sky-dark: #0e9bd8;
	--pt-sky-soft: #dff2fd;
	--pt-mint: #2ed3a6;
	--pt-mint-dark: #0fa37e;
	--pt-mint-soft: #dcf7ee;
	--pt-sun: #ffc53d;
	--pt-sun-dark: #e0a008;
	--pt-sun-soft: #fff3d1;
	--pt-violet: #8b5cf6;
	--pt-violet-dark: #7340e0;
	--pt-violet-soft: #ece5fd;

	/* Tinta y papel */
	--pt-ink: #33304e;
	--pt-ink-soft: #6f6b8c;
	--pt-cream: #fff9f2;
	--pt-paper: #ffffff;

	/* Tipografías */
	--pt-font-display: 'Fredoka', 'Nunito', sans-serif;
	--pt-font-body: 'Nunito', sans-serif;
	--pt-font-mono: 'JetBrains Mono', monospace;

	/* Radios y sombras */
	--pt-r-sm: 10px;
	--pt-r: 18px;
	--pt-r-lg: 26px;
	--pt-r-pill: 999px;
	--pt-shadow: 0 8px 24px rgba(51, 48, 78, .10);
	--pt-shadow-lg: 0 18px 44px rgba(51, 48, 78, .16);

	/* Tonos de nivel: empezando / avanzando / fuerte / estrella */
	--pt-tone-start: #ff8fa3;
	--pt-tone-going: var(--pt-sun);
	--pt-tone-strong: var(--pt-mint);
	--pt-tone-star: var(--pt-violet);
}

/* ---------- Reset suave ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--pt-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--pt-ink);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--pt-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--pt-ink);
}
p { margin: 0 0 1em; }
a { color: var(--pt-violet-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding-left: 1.2em; }

.pt-mono { font-family: var(--pt-font-mono); font-size: .92em; }
.accent { color: var(--pt-mint); font-weight: 800; }
.pt-note { font-size: .85rem; color: var(--pt-ink-soft); margin: 0; }

/* ---------- Botones ---------- */
.pt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--pt-r-pill);
	font-family: var(--pt-font-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pt-btn:hover { transform: translateY(-2px); }
.pt-btn:active { transform: translateY(1px); }

.pt-btn--candy {
	background: var(--pt-coral);
	color: #fff;
	box-shadow: 0 4px 0 var(--pt-coral-dark);
}
.pt-btn--candy:hover { box-shadow: 0 6px 0 var(--pt-coral-dark); }
.pt-btn--candy:active { box-shadow: 0 2px 0 var(--pt-coral-dark); }

.pt-btn--outline {
	background: var(--pt-paper);
	color: var(--pt-ink);
	box-shadow: 0 4px 0 rgba(51, 48, 78, .18);
	border: 2px solid rgba(51, 48, 78, .12);
}
.pt-btn--outline:active { box-shadow: 0 2px 0 rgba(51, 48, 78, .18); }

.pt-btn--soft {
	background: var(--pt-violet-soft);
	color: var(--pt-violet-dark);
	box-shadow: 0 4px 0 rgba(115, 64, 224, .25);
}
.pt-btn--soft:active { box-shadow: 0 2px 0 rgba(115, 64, 224, .25); }

.pt-btn--block { width: 100%; }
.pt-btn--sm { padding: 10px 18px; font-size: .9rem; }

/* ---------- Chips ---------- */
.pt-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: var(--pt-r-pill);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}
.pt-chip--white { background: rgba(255, 255, 255, .85); color: var(--pt-ink); }
.pt-chip--coral { background: var(--pt-coral-soft); color: var(--pt-coral-dark); }
.pt-chip--soft { background: rgba(51, 48, 78, .07); color: var(--pt-ink-soft); }
.pt-chip--tone-start { background: #ffe7ec; color: #d14d68; }
.pt-chip--tone-going { background: var(--pt-sun-soft); color: var(--pt-sun-dark); }
.pt-chip--tone-strong { background: var(--pt-mint-soft); color: var(--pt-mint-dark); }
.pt-chip--tone-star { background: var(--pt-violet-soft); color: var(--pt-violet-dark); }

/* ---------- Logo ---------- */
.pt-logo { display: inline-flex; align-items: center; gap: 10px; }
.pt-logo__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--pt-coral), var(--pt-violet));
	color: #fff;
	box-shadow: 0 4px 0 rgba(51, 48, 78, .15);
	flex-shrink: 0;
}
.pt-logo__mark svg { width: 24px; height: 24px; }
.pt-logo__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pt-logo__text {
	font-family: var(--pt-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.05;
	color: var(--pt-ink);
	display: flex;
	flex-direction: column;
}
.pt-logo__alt { display: inline; color: var(--pt-coral); }
.pt-logo__domain {
	font-family: var(--pt-font-body);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--pt-ink-soft);
}
.pt-logo--sm .pt-logo__mark { width: 34px; height: 34px; border-radius: 11px; }
.pt-logo--sm .pt-logo__mark svg { width: 19px; height: 19px; }
.pt-logo--sm .pt-logo__text { font-size: 1.1rem; }
.pt-logo--white .pt-logo__text { color: #fff; }
.pt-logo--white .pt-logo__domain { color: rgba(255, 255, 255, .6); }

/* ---------- Tarjeta base ---------- */
.pt-card {
	background: var(--pt-paper);
	border: 2px solid rgba(51, 48, 78, .06);
	border-radius: var(--pt-r-lg);
	box-shadow: var(--pt-shadow);
	padding: 24px;
}

/* ---------- Insignias de icono ---------- */
.pt-badge {
	display: grid;
	place-items: center;
	border-radius: 14px;
	flex-shrink: 0;
}
.pt-badge--38 { width: 38px; height: 38px; border-radius: 12px; }
.pt-badge--40 { width: 40px; height: 40px; border-radius: 13px; }
.pt-badge--56 { width: 56px; height: 56px; border-radius: 18px; }
.pt-badge--coral { background: var(--pt-coral-soft); color: var(--pt-coral-dark); }
.pt-badge--sky { background: var(--pt-sky-soft); color: var(--pt-sky-dark); }
.pt-badge--mint { background: var(--pt-mint-soft); color: var(--pt-mint-dark); }
.pt-badge--sun { background: var(--pt-sun-soft); color: var(--pt-sun-dark); }
.pt-badge--violet { background: var(--pt-violet-soft); color: var(--pt-violet-dark); }

/* ---------- Tonos de texto ---------- */
.pt-tone-start { color: #e2607e; }
.pt-tone-going { color: var(--pt-sun-dark); }
.pt-tone-strong { color: var(--pt-mint-dark); }
.pt-tone-star { color: var(--pt-violet-dark); }

/* ---------- Barra de nivel: 10 puntos ---------- */
.pt-dots { display: inline-flex; gap: 5px; align-items: center; }
.pt-dots__dot {
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: var(--pt-r-pill);
	background: rgba(51, 48, 78, .10);
	overflow: hidden;
}
.pt-dots--sm .pt-dots__dot { width: 12px; height: 12px; }
.pt-dots__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: var(--pt-r-pill);
}
.pt-dots--start .pt-dots__fill { background: var(--pt-tone-start); }
.pt-dots--going .pt-dots__fill { background: var(--pt-tone-going); }
.pt-dots--strong .pt-dots__fill { background: var(--pt-tone-strong); }
.pt-dots--star .pt-dots__fill { background: var(--pt-tone-star); }

/* ---------- Migas de pan ---------- */
.pt-crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	font-weight: 700;
	flex-wrap: wrap;
}
.pt-crumbs a { color: var(--pt-ink-soft); text-decoration: none; }
.pt-crumbs a:hover { color: var(--pt-coral-dark); text-decoration: none; }
.pt-crumbs__sep { color: rgba(51, 48, 78, .3); }
.pt-crumbs__here { color: var(--pt-ink); }

/* ---------- Progreso fino ---------- */
.pt-progress {
	height: 10px;
	border-radius: var(--pt-r-pill);
	background: rgba(51, 48, 78, .08);
	overflow: hidden;
}
.pt-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pt-mint), var(--pt-sky));
	transition: width .4s ease;
}

/* ---------- Botón icono ---------- */
.pt-iconbtn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	border: 2px solid rgba(51, 48, 78, .10);
	background: var(--pt-paper);
	color: var(--pt-ink);
	transition: transform .15s ease, background .15s ease;
}
.pt-iconbtn:hover { transform: translateY(-2px); background: var(--pt-cream); }

/* ---------- Aparición con rebote ---------- */
.pt-reveal {
	opacity: 0;
	transform: translateY(26px) scale(.98);
	transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.pt-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.pt-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Ir arriba ---------- */
.pt-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 16px;
	background: var(--pt-coral);
	color: #fff;
	box-shadow: 0 4px 0 var(--pt-coral-dark);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}
.pt-totop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.pt-totop:hover { transform: translateY(-3px); }
.pt-totop:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--pt-coral-dark); }

/* ---------- Rejillas ---------- */
.pt-grid { display: grid; gap: 18px; }
.pt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pt-grid--5 { grid-template-columns: 2fr 3fr; }
@media (max-width: 1000px) {
	.pt-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.pt-grid--5 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.pt-grid--3 { grid-template-columns: 1fr; }
	.pt-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.pt-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Accesibilidad ---------- */
.pt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--pt-ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 12px 0;
	z-index: 200;
}
.pt-skip:focus { left: 0; color: #fff; }