/*
 * Preguntas frecuentes de tucine.club (plugin tucine-preguntas).
 *
 * Misma paleta que tucine-planes y tucine-catalogo, para que se lea como la
 * misma web. Los enlaces y campos llevan !important donde el tema pisa (borde
 * cero y radio de píldora en todos los botones y campos).
 */

.tcpf {
	--tcpf-fondo: #141414;
	--tcpf-tarjeta: #1d1d1d;
	--tcpf-tarjeta-hover: #232323;
	--tcpf-borde: #2c2c2c;
	--tcpf-texto: #ffffff;
	--tcpf-apagado: #b4b4b4;
	--tcpf-acento: #ff5a19;

	color: var(--tcpf-texto);
	box-sizing: border-box;
}

.tcpf *,
.tcpf *::before,
.tcpf *::after {
	box-sizing: border-box;
}

/* ── El acordeón (común a portada y página) ────────────────────────────── */

.tcpf-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.tcpf-item {
	border: 1px solid var(--tcpf-borde);
	border-radius: 14px;
	background: var(--tcpf-tarjeta);
	transition: border-color .15s ease, background-color .15s ease;
}

.tcpf-item:hover {
	background: var(--tcpf-tarjeta-hover);
}

/* Abierta, el borde en el acento: dice cuál se está leyendo sin otro adorno. */
.tcpf-item[open] {
	border-color: rgba(255, 90, 25, .55);
}

.tcpf-pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	color: var(--tcpf-texto);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

/* Fuera el triángulo nativo de <summary>: el «+» propio hace de indicador. */
.tcpf-pregunta::-webkit-details-marker {
	display: none;
}

.tcpf-pregunta:focus-visible {
	outline: 2px solid var(--tcpf-acento);
	outline-offset: 2px;
	border-radius: 14px;
}

/*
 * El «+» en un círculo tintado, que gira a «×» al abrir. Gira y no se cambia de
 * icono para que el gesto se vea: es la única animación de la sección.
 */
/* Con `.tcpf` delante: Font Awesome se carga después y su `.fas { display:
   inline-block }` ganaba, y el «+» quedaba fuera del centro del círculo. */
.tcpf .tcpf-signo {
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 90, 25, .15);
	color: var(--tcpf-acento);
	font-size: 12px;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.tcpf .tcpf-item[open] .tcpf-signo {
	transform: rotate(45deg);
	background: var(--tcpf-acento);
	color: #fff;
}

.tcpf-respuesta {
	padding: 0 20px 18px;
	color: var(--tcpf-apagado);
	font-size: 15px;
	line-height: 1.65;
}

.tcpf-respuesta p {
	margin: 0 0 10px;
}

.tcpf-respuesta p:last-child {
	margin-bottom: 0;
}

.tcpf-respuesta strong,
.tcpf-respuesta b {
	color: var(--tcpf-texto);
	font-weight: 700;
}

.tcpf-respuesta a {
	color: var(--tcpf-acento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Portada ───────────────────────────────────────────────────────────── */

/*
 * Dos columnas: el título a la izquierda, fijo mientras se baja por las
 * preguntas (sticky), y la lista a la derecha. En móvil, una debajo de otra.
 */
.tcpf--portada {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: start;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.tcpf-lado {
	position: sticky;
	top: 110px;
}

.tcpf-antetitulo {
	margin: 0 0 10px;
	color: var(--tcpf-acento);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Los títulos con `.tcpf` y la etiqueta delante: el tema fija el tamaño de
   h1 y h2 con más peso que una sola clase, y los dejaba enormes. */
.tcpf h2.tcpf-titulo {
	margin: 0 0 14px;
	color: var(--tcpf-texto);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.tcpf-texto {
	margin: 0 0 24px;
	color: var(--tcpf-apagado);
	font-size: 16px;
	line-height: 1.6;
}

.tcpf-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--tcpf-borde) !important;
	border-radius: 999px !important;
	background: transparent;
	color: var(--tcpf-texto) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}

.tcpf-boton:hover {
	border-color: var(--tcpf-acento) !important;
	background: rgba(255, 90, 25, .1);
}

.tcpf-boton i {
	color: var(--tcpf-acento);
	font-size: 13px;
}

@media (max-width: 900px) {
	.tcpf--portada {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tcpf-lado {
		position: static;
		text-align: center;
	}

	.tcpf h2.tcpf-titulo {
		font-size: 30px;
	}
}

/* ── Página completa ───────────────────────────────────────────────────── */

.tcpf--completa {
	max-width: 860px;
	margin: 0 auto;
	/* La cabecera del tema es fija: el contenido empieza debajo. */
	padding: 150px 20px 80px;
}

/* El título de página del tema sobra: la cabecera propia lo sustituye. */
body:has(.tcpf--completa) .page-header {
	display: none;
}

.tcpf-cabecera {
	margin: 0 0 36px;
	text-align: center;
}

.tcpf h1.tcpf-titulo-pagina {
	margin: 0 0 8px;
	color: var(--tcpf-texto);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.tcpf-subtitulo {
	margin: 0 0 24px;
	color: var(--tcpf-apagado);
	font-size: 16px;
}

.tcpf-buscador {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto 18px;
	padding: 0 18px;
	border: 1.5px solid var(--tcpf-borde);
	border-radius: 16px;
	background: var(--tcpf-tarjeta);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tcpf-buscador:focus-within {
	border-color: var(--tcpf-acento);
	box-shadow: 0 0 0 4px rgba(255, 90, 25, .15);
}

.tcpf-buscador i {
	color: var(--tcpf-apagado);
}

.tcpf-buscador input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--tcpf-texto) !important;
	font-size: 16px;
	outline: none;
}

.tcpf-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.tcpf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--tcpf-borde) !important;
	border-radius: 999px !important;
	background: var(--tcpf-tarjeta);
	color: var(--tcpf-apagado) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .15s ease, color .15s ease;
}

.tcpf-chip:hover {
	border-color: var(--tcpf-acento) !important;
	color: var(--tcpf-texto) !important;
}

.tcpf-chip i {
	color: var(--tcpf-acento);
	font-size: 13px;
}

.tcpf-categoria {
	/* Al saltar desde un atajo, que el título no quede tapado por la cabecera fija. */
	scroll-margin-top: 130px;
	margin: 0 0 36px;
}

.tcpf h2.tcpf-categoria-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--tcpf-texto);
	font-size: 22px;
	font-weight: 700;
}

.tcpf-categoria-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 90, 25, .15);
	color: var(--tcpf-acento);
	font-size: 15px;
}

.tcpf-aviso {
	margin: 24px 0;
	color: var(--tcpf-apagado);
	text-align: center;
}

@media (max-width: 767px) {
	.tcpf--completa {
		padding-top: 130px;
	}

	.tcpf h1.tcpf-titulo-pagina {
		font-size: 32px;
	}

	.tcpf-pregunta {
		padding: 16px;
		font-size: 15px;
	}

	.tcpf-respuesta {
		padding: 0 16px 16px;
	}
}